// ==================================================
// 📝 Forms & Inputs Styles
// ==================================================

.form {

  // 👉 Form Group Wrapper
  .form-group {
    margin-bottom: 16px;

    // 📂 Upload Field
    .upload-card {
      input[type="file"] {
        display: none;
      }
      label.label-card {
        width: 100%;
        height: 200px;
        cursor: pointer;
        text-align: center;
        border-radius: 12px;
        //background: #F9FAFB;
        border: 1px dashed $border-01;
        display: flex;
        align-items: center;
        justify-content: center;
        .label-content{
          width: 100%;
          pointer-events: none;
        }
      }
    }

    // 🔍 Search Input with Icon
    .search-wrapper {
      position: relative;

      &.align-left {
        .form-control {
          padding: 9px 12px 9px 35px;
        }

        .search-icon {
          position: absolute;
          left: 12px;
          top: 50%;
          transform: translateY(-50%);
          max-width: 16px;
        }
      }

      .form-control {
        padding: 9px 35px 9px 12px;
      }

      .search-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        max-width: 16px;
      }
    }

    // 🔘 Radio Group
    &.radio-group {
      ul.radio-list {
        li {
          &:not(:last-of-type) {
            margin: 0 24px 6px 0;
            @media screen and (max-width: $screen-xs) {
              margin: 0 16px 6px 0;
            }
          }
          input {
            display: none;
          }
          label:not(.radio-label) {
            position: relative;
            padding-left: 24px;
            cursor: pointer;
            margin-bottom: 0;
            @include font-size(20, 24, 400, $text-03);
            &.f-18{
              @include font-size(18, 24, 400, $text-03);
            }
            &:before, &:after {
              content: "";
              width: 16px;
              height: 16px;
              border-radius: 50%;
              background-color: transparent;
              border: 1px solid $text-06;
              position: absolute;
              top: calc(50%);
              left: 0;
              transform: translateY(-50%);
              transition: all 0.2s ease;
            }
            &:after {
              background-color: $text-06;
              border-color: $text-06;
              transform: translateY(-50%) scale(0);
            }
          }
          input[type="radio"]:checked + label {
            &::before {
              border-color: $text-06;
            }
            &::after {
              transform: translateY(-50%) scale(0.40);
            }
          }
        }
      }
    }

    // 🔘 Tag Radio Group
    &.tag-radio-group {
      ul.radio-list {
        li {
          &:not(:last-of-type) {
            margin: 0 8px 6px 0;
            @media screen and (max-width: $screen-xs) {
              margin: 0 4px 6px 0;
            }
          }
          input {
            display: none;
          }
          label:not(.radio-label) {
            height: 40px;
            border-radius: 30px;
            padding: 12px 33px;
            user-select: none;
            position: relative;
            cursor: pointer;
            margin-bottom: 0;
            background-color: $white;
            border: 2px solid $primary-01;
            @include font-size(18, 24, 700, $primary-01);
            @media screen and (max-width: $screen-xs) {
              height: 34px;
              padding: 8px 18px;
              @include font-size(16, 24, 700, $primary-01);
            }
          }
          input[type="radio"]:checked + label {
            color: $white;
            background: $primary-01;
          }
        }
      }
    }

    // ☑️ Checkbox Group
    &.checkbox-group {
      ul.checkbox-list {
        li {
          display: inline-grid;
          grid-template-columns: 16px 1fr;
          align-items: self-start;
          gap: 8px;
          &:not(:last-of-type) {
            margin: 0 16px 6px 0;
          }
          label {
            margin: 0;
            padding: 0;
            user-select: none;
            position: relative;
            cursor: pointer;
            @include font-size(20, 24, 400, $text-03);
          }
          input[type="checkbox"] {
            position: relative;
            width: 16px;
            height: 16px;
            border-radius: 4px;
            border: 1px solid $border-05;
            cursor: pointer;
            //vertical-align: text-top;
            appearance: none;
            background: $white;
            top: 5px;
            &:checked {
              background: $white;
              &:before {
                opacity: 1;
              }
            }
            &:before {
              content: '';
              width: 5px;
              height: 10px;
              position: absolute;
              top: 45%;
              right: calc(50% - 1px);
              border: solid $border-05;
              border-width: 0 2px 2px 0;
              transform: rotate(45deg) translate(-50%, -50%);
              opacity: 0;
            }
          }
        }
      }
    }

    // ☑️ Switch Group
    &.switch-group{
      ul.switch-list{
        li{
          display: block;
          &:not(:last-of-type){
            margin-bottom: 16px;
          }
          .switch {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding-left: 0;
            input {
              display: none;
            }
            .slider {
              position: relative;
              display: inline-block;
              width: 36px;
              height: 20px;
              background-color: $cool-gray-01;
              border-radius: 50px;
              transition: 0.4s;
              cursor: pointer;
              &:before {
                position: absolute;
                content: "";
                height: 16px;
                width: 16px;
                left: 2px;
                bottom: 2px;
                border-radius: 50%;
                background-color: $white;
                box-shadow: $box-shadow-01;
                transition: 0.4s;
              }
            }
            input:checked + .slider {
              background-color: #98E1BF;
            }
            input:focus + .slider {
              box-shadow: 0 0 1px #98E1BF;
            }
            input:checked + .slider:before {
              transform: translateX(16px);
            }
            .switch-label {
              cursor: pointer;
              user-select: none;
              @include font-size(18, 24, 400, $text-04);
            }
          }

        }
      }
    }

  }

  // 👉 Label Style
  label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
    padding-left: 8px;
    @include font-size(14, 18, 600, $text-01);
    sup {
      position: relative;
      top: 1px;
      @include font-size(14, 10, 600, $primary-01);
    }
    span{
      @include font-size(14, 18, 600, $text-02);
    }
  }



  .input-container{
    position: relative;
    &.has-icon{
      .icon{
        position: absolute;
        bottom: 12px;
        left: 12px;
        img{
          max-width: 18px;
        }
      }
      .form-control{
        padding: 9px 12px 9px 38px;
      }
    }
    &.textarea-container{
      &.has-icon{
        .icon{
          top: 10px;
        }
      }
    }
    &.password-container{
      .password-eye-icon{
        position: absolute;
        bottom: 12px;
        right: 12px;
        img{
          max-width: 16px;
        }
      }
      .form-control{
        padding: 9px 37px 9px 36px;
      }
    }
    &.select-container{
      &.has-icon{
        select{
          padding: 9px 36px 9px 36px;
        }
      }
      select {
        background: url("../../assets/icons/arrows/arrow-angle-down-light-gray-icon.svg");
        background-repeat: no-repeat;
        background-size: 12px;
        background-position: calc(100% - 13px) 50%;
        padding: 9px 35px 9px 12px;
      }
    }

    // 📝 Textarea Style
    textarea.form-control {
      resize: none;
      padding: 10px 14px;
      min-height: 81px;
      border-radius: 8px;
      border: 2px solid $border-04;
      &.h-130{
        min-height: 130px;
      }
    }
    // 🖋️ Input Style
    .form-control {
      width: 100%;
      height: 40px;
      padding: 12px 8px;
      border-radius: 0;
      border: none;
      border-bottom: 2px solid $border-04;
      outline: none;
      appearance: none;
      background-color: $white;
      @include font-size(18, 24, 400, $text-06);
      &::placeholder {
        color: $cool-gray-04;
      }
      &:focus {
        box-shadow: none;
      }
    }
    input[type="date"] {
      // Hide the default browser calendar icon
      &::-webkit-calendar-picker-indicator {
        opacity: 0;
        display: none;
        -webkit-appearance: none;
      }

      // Hide the clear (x) button on some browsers
      &::-webkit-clear-button {
        display: none;
      }

      // Hide spin buttons (for time/date controls)
      &::-webkit-inner-spin-button {
        display: none;
      }

      // Hide dropdown arrow in Firefox
      &::-moz-focus-inner,
      &::-moz-calendar-picker-indicator {
        display: none;
      }
    }

  }
}