@import '../variables';
@import '../theme-colors';

.custom-control-label {
  &::before {
    background-color: var(--form-control-bg);
  }
}

// Radios Button Group
.radio-button-group {
  .btn-group {
    border-radius: 0.3rem;

    &:focus {
      outline: none;
    }

    .btn {
      padding: 10px 1.2rem;
      background: transparent;

      &.active {
        background-color: $brand-color;
        border-color: $brand-color !important;

        span {
          color: $white;
        }
      }
    }
  }
}

// Custom Designed Checkbox
.custom-designed-checkbox {
  display: flex;

  input {
    opacity: 0;
    position: absolute;

    & {
      + label {
        padding: 0;
        cursor: pointer;
        position: relative;

        &:before {
          content: '';
          width: 20px;
          height: 20px;
          margin-right: 8px;
          display: inline-block;
          vertical-align: text-top;
          background: transparent;
          border: 1px solid;
          border-radius: 0.18rem;
        }
      }
    }

    // Disabled label.
    &:disabled {
      + label {
        opacity: 0.7;
        cursor: auto;

        &:before {
          opacity: 0.5;
        }
      }
    }

    // Checkmark
    &:checked {
      + label {
        &:after {
          content: '\f00c';
          position: absolute;
          left: 4.5px;
          top: 50%;
          transform: translateY(-50%);
          font: normal normal 700 0.75rem "Font Awesome 5 Free";
        }
      }
    }
  }

  &.checkbox-inline {
    margin-right: 1rem;
    display: inline-flex;
  }

  &.checkbox-default {
    input {
      & {
        + label {
          &:before {
            border-color: #adb5bd;
          }
        }
      }

      &:checked {
        + label {
          &:before {
            border-color: $brand-color;
          }

          &:after {
            color: $brand-color;
          }
        }
      }
    }
  }

  &.checkbox-primary {
    input {
      & {
        + label {
          &:before {
            border-color: $primary-color;
          }
        }
      }

      &:checked {
        + label {
          &:before {
            border-color: $primary-color;
          }

          &:after {
            color: $primary-color;
          }
        }
      }
    }
  }

  &.checkbox-secondary {
    input {
      & {
        + label {
          &:before {
            border-color: $secondary-color;
          }
        }
      }

      &:checked {
        + label {
          &:before {
            border-color: $secondary-color;
          }

          &:after {
            color: $secondary-color;
          }
        }
      }
    }
  }

  &.checkbox-success {
    input {
      & {
        + label {
          &:before {
            border-color: $success-color;
          }
        }
      }

      &:checked {
        + label {
          &:before {
            border-color: $success-color;
          }

          &:after {
            color: $success-color;
          }
        }
      }
    }
  }

  &.checkbox-warning {
    input {
      & {
        + label {
          &:before {
            border-color: $warning-color;
          }
        }
      }

      &:checked {
        + label {
          &:before {
            border-color: $warning-color;
          }

          &:after {
            color: $warning-color;
          }
        }
      }
    }
  }

  &.checkbox-info {
    input {
      & {
        + label {
          &:before {
            border-color: $info-color;
          }
        }
      }

      &:checked {
        + label {
          &:before {
            border-color: $info-color;
          }

          &:after {
            color: $info-color;
          }
        }
      }
    }
  }

  &.checkbox-danger {
    input {
      & {
        + label {
          &:before {
            border-color: $danger-color;
          }
        }
      }

      &:checked {
        + label {
          &:before {
            border-color: $danger-color;
          }

          &:after {
            color: $danger-color;
          }
        }
      }
    }
  }
}

// Custom designed radio
.custom-designed-radio {
  cursor: pointer;
  display: flex;
  position: relative;
  padding-left: 28px;
  margin: 0 0 0.5rem 0;

  &.disabled {
    opacity: .7;

    .outside {
      background-color: var(--bg-input-readonly);
    }
  }

  input {
    opacity: 0;
    width: 1px;
    height: 1px;
  }

  .outside {
    flex-shrink: 0;
    display: inline-block;
    width: 22px;
    height: 22px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -12px;
    border: 1px solid;
    border-radius: 50%;
    background: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;

    .inside {
      position: absolute;
      top: 5px;
      left: 5px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      transform: scale(0, 0);
      -webkit-transform: scale(0, 0);
    }
  }

  input {
    &:checked {
      + .outside {
        .inside {
          transform: scale(1, 1);
          -webkit-transform: scale(1, 1);
          animation: radio-select 0.1s linear;
          -webkit-animation: radio-select 0.1s linear;
        }
      }
    }
  }

  &.radio-inline {
    margin-right: 1rem;
    display: inline-flex;
  }

  &.radio-default {
    .outside {
      border-color: #adb5bd;

      .inside {
        background: $brand-color;
      }
    }

    input {
      &:checked {
        + .outside {
          border-color: $brand-color;
        }
      }
    }
  }

  &.radio-primary {
    .outside {
      border-color: $brand-color;

      .inside {
        background: $brand-color;
      }
    }
  }

  &.radio-secondary {
    .outside {
      border-color: $secondary-color;

      .inside {
        background: $secondary-color;
      }
    }
  }

  &.radio-success {
    .outside {
      border-color: $success-color;

      .inside {
        background: $success-color;
      }
    }
  }

  &.radio-warning {
    .outside {
      border-color: $warning-color;

      .inside {
        background: $warning-color;
      }
    }
  }

  &.radio-info {
    .outside {
      border-color: $info-color;

      .inside {
        background: $info-color;
      }
    }
  }

  &.radio-danger {
    .outside {
      border-color: $danger-color;

      .inside {
        background: $danger-color;
      }
    }
  }
}

// SCSS for RTL Layout
[dir="rtl"] {
  // Custom radios checkbox
  .custom-designed-checkbox {
    input {
      & {
        + label {
          &:before {
            margin-right: 0;
            margin-left: 8px;
          }
        }
      }

      // Checkmark
      &:checked {
        + label {
          &:after {
            left: auto;
            right: 4.5px;
          }
        }
      }
    }

    &.checkbox-inline {
      margin-right: 0;
      margin-left: 1rem;
    }
  }

  .custom-designed-radio {
    padding-right: 28px;
    padding-left: 0;

    .outside {
      right: 0;
      left: auto;
    }

    &.radio-inline {
      margin-right: 0;
      margin-left: 1rem;
    }
  }

  // Bootstrap radios checkbox
  .custom-control-inline {
    margin-right: 0;
    margin-left: 1rem;
  }

  // Default radios checkbox
  .form-check-label {
    margin-right: 1.5rem;
  }

  .form-check-input {
    margin-right: 0;
    margin-left: 0;
  }

  .form-check-inline {
    margin-right: 0;
    margin-left: .75rem;

    .form-check-label {
      margin-right: .5rem;
    }
  }
}
