@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;
@use "../common/var.scss" as *;

@include b(switch) {
  display: inline-flex;
  align-items: center;
  font-size: getCssVar("font-size", "medium");
  line-height: 1.5715;

  @include when(disabled) {
    @include be(switch, core) {
      background-color: getCssVar("color", "primary-3") !important;
      border-color: getCssVar("color", "primary-3") !important;
      cursor: not-allowed;
    }
  }

  @include when(error) {
    @include be(switch, core) {
      border-color: getCssVar("color", "danger-6") !important;
    }
  }

  @include when(checked) {
    @each $size in $size-list {
      @include this-bm(switch, #{$size}) {
        @include be(switch, core-action) {
          left: calc(100% - (getCssVar("size", $size) - 12px + 3px));
        }
        @include be(switch, core-label) {
          padding: 0 calc(getCssVar("size", $size) - 12px + 8px) 0 8px;
        }
      }
    }
  }

  @include e(inner) {
    position: absolute;
    height: 0;
    width: 0;
    opacity: 0;
    margin: 0;

    &:focus-visible {
      @include next-be(switch, core) {
        outline: 2px solid getCssVar("color", "primary-6");
        outline-offset: 1px;
        transition:
          outline-offset 0s,
          outline 0s;
      }
    }
  }

  @include e(core) {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 100%;
    width: 100%;
    outline: none;
    border-radius: getCssVar("radius", "medium");
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
  }

  @include e(core-action) {
    position: absolute;
    left: 3px;
    top: 3px;
    border-radius: getCssVar("radius", "small");
    background-color: getCssVar("color", "bg-3");
    transition:
      background-color 0.3s getCssVar("bezier", "1"),
      left 0.3s getCssVar("bezier", "1");
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @include e(core-label) {
    width: 100%;
    transition: padding 0.3s getCssVar("bezier", "1");
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
  }

  @each $size in $size-list {
    @include m(#{$size}) {
      height: calc(getCssVar("size", $size) - 4px);
      min-width: calc((getCssVar("size", $size) - 4px) * 2);
      @include be(switch, core-action) {
        height: calc(getCssVar("size", $size) - 12px);
        width: calc(getCssVar("size", $size) - 12px);
      }
      @include be(switch, core-label) {
        padding: 0 8px 0 calc(getCssVar("size", $size) - 12px + 8px);
      }
    }
  }

  @include when(circle) {
    @include be(switch, core) {
      border-radius: 999px;
    }

    @include be(switch, core-action) {
      border-radius: getCssVar("radius", "circle");
    }
  }
}