@use "../base/mixins" as *;
@use "../base/variables" as *;
@use "../base/typography" as *;

/* ========== */
/* Switch : Switchset */
.switchset {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;

  &__wrap {
    display: flex;
    align-items: center;

    .switchset+.switchset {
      margin-left: 1.2rem;
      margin-top: 0;
    }
  }

  &+& {
    margin-top: 1.2rem;
  }

  &__label {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;

    span {
      display: inline-block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &__bg {
    left: 0;
    z-index: 1;
    transition: 0.3s;

    [data-theme="dark"] & {
      background-color: #6c6c6c;
    }

    [data-theme="light"] & {
      background-color: #d0d0d0;
    }
  }

  &__thumb {
    border-radius: 50%;
    z-index: 2;
    transition: 0.3s;
  }

  &__input {
    @include blind();

    &:disabled~.switchset__bg {
      opacity: 0.5;
    }
  }

  &__tit {
    display: inline-block;
    color: theme-color($text-high);
    font-weight: 700;
  }

  // Type modifiers
  &--type1 {
    .switchset__label {
      width: 4.6rem;
      height: 2.4rem;
    }

    .switchset__bg {
      width: 100%;
      height: 100%;
      border-radius: 2.4rem;
    }

    .switchset__thumb {
      left: 0.2rem;
      width: 2rem;
      height: 2rem;
      background-color: #ffffff;
    }

    .switchset__input:checked~.switchset__bg {
      background-color: theme-color($primary);
    }

    .switchset__input:checked~.switchset__thumb {
      transform: translate(calc(4.6rem - 2.4rem), -50%);
    }
  }

  &--type2 {
    .switchset__label {
      width: 4rem;
      height: 1.8rem;
    }

    .switchset__bg {
      width: 100%;
      height: 0.4rem;
      border-radius: 0.4rem;
    }

    .switchset__thumb {
      left: 0;
      width: 1.8rem;
      height: 1.8rem;
      background-color: var(--bg-color);
      box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
    }

    .switchset__input:checked~.switchset__bg {
      background-color: theme-rgb($primary, 0.3);
    }

    .switchset__input:checked~.switchset__thumb {
      transform: translate(calc(4rem - 1.8rem), -50%);
      background-color: theme-color($primary);
    }
  }

  &--type3 {
    .switchset__label {
      width: 4rem;
      height: 2.4rem;
    }

    .switchset__bg {
      width: 100%;
      height: 1.6rem;
      border-radius: 1.6rem;
    }

    .switchset__thumb {
      left: 0;
      width: 2.4rem;
      height: 2.4rem;
      background-color: var(--bg-color);
      box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
    }

    .switchset__input:checked~.switchset__bg {
      background-color: theme-rgb($primary, 0.3);
    }

    .switchset__input:checked~.switchset__thumb {
      transform: translate(calc(4rem - 2.4rem), -50%);
      background-color: theme-color($primary);
    }

    .switchset__input:disabled~.switchset__bg {
      opacity: 0.5;
    }

    .switchset__input:disabled~.switchset__thumb {
      opacity: 0.5;
    }
  }

  // Size modifiers
  &--sm {
    .switchset__tit {
      @include typography("p2");
    }

    &.switchset--type1 {
      .switchset__label {
        width: 3.8rem;
        height: 2rem;
      }

      .switchset__bg {
        border-radius: 2rem;
      }

      .switchset__thumb {
        width: 1.6rem;
        height: 1.6rem;
      }

      .switchset__input:checked~.switchset__thumb {
        transform: translate(calc(100% + .2rem), -50%);
      }
    }

    &.switchset--type2 {
      .switchset__label {
        width: 3.6rem;
        height: 1.6rem;
      }

      .switchset__thumb {
        width: 1.4rem;
        height: 1.4rem;
      }

      .switchset__input:checked~.switchset__thumb {
        transform: translate(calc(3.6rem - 1.4rem), -50%);
      }
    }

    &.switchset--type3 {
      .switchset__label {
        width: 3.6rem;
        height: 2rem;
      }

      .switchset__bg {
        height: 1.2rem;
        border-radius: 1.2rem;
      }

      .switchset__thumb {
        width: 2rem;
        height: 2rem;
      }

      .switchset__input:checked~.switchset__thumb {
        transform: translate(calc(3.6rem - 2rem), -50%);
      }
    }
  }

  // Responsive
  @include media("lg") {
    &--type1 {
      .switchset__label {
        width: 4.2rem;
        height: 2rem;
      }

      .switchset__bg {
        border-radius: 2rem;
      }

      .switchset__thumb {
        width: 1.6rem;
        height: 1.6rem;
      }
    }

    &--type2 {
      .switchset__label {
        width: 3.6rem;
        height: 1.6rem;
      }

      .switchset__thumb {
        width: 1.4rem;
        height: 1.4rem;
      }
    }

    &--type3 {
      .switchset__label {
        width: 3.6rem;
        height: 2rem;
      }

      .switchset__bg {
        height: 1.2rem;
        border-radius: 1.2rem;
      }

      .switchset__thumb {
        width: 2rem;
        height: 2rem;
      }
    }

    &--sm {
      &.switchset--type1 {
        .switchset__label {
          width: 3rem;
          height: 1.6rem;
        }

        .switchset__bg {
          border-radius: 1.6rem;
        }

        .switchset__thumb {
          width: 1.2rem;
          height: 1.2rem;
        }
      }

      &.switchset--type2 {
        .switchset__label {
          width: 3.2rem;
          height: 1.2rem;
        }

        .switchset__thumb {
          width: 1rem;
          height: 1rem;
        }
      }

      &.switchset--type3 {
        .switchset__label {
          width: 3.2rem;
          height: 1.6rem;
        }

        .switchset__bg {
          height: 0.8rem;
          border-radius: 0.8rem;
        }

        .switchset__thumb {
          width: 1.6rem;
          height: 1.6rem;
        }
      }
    }
  }
}