$prefix: "adui-switch";
@import "./tokens";

.#{$prefix} {
  &-wrapper {
    display: inline-block;
    font-size: var(--adui-switch-font-size);
    cursor: pointer;
    user-select: none;

    &:hover {
      .#{$prefix} {
        &-base {
          background-color: rgba(0, 0, 0, 0.2);
        }
      }
    }

    &[data-actived="true"] {
      .#{$prefix} {
        &-indicator {
          transition: var(--adui-motion-duration-base)
            var(--adui-motion-ease-base) all;
        }
      }

      &:hover {
        &:active {
          .#{$prefix} {
            &-indicator {
              inset: 2px calc(100% - var(--adui-switch-indicator-size) - 8px)
                2px 2px;
            }
          }
        }
      }
    }
  }
  &-checked {
    &:hover {
      .#{$prefix} {
        &-base {
          background-color: var(--primary-color);
        }
      }
    }

    &[data-actived="true"] {
      &:hover {
        &:active {
          .#{$prefix} {
            &-indicator {
              inset: 2px 2px 2px
                calc(100% - var(--adui-switch-indicator-size) - 8px);
            }
          }
        }
      }
    }

    .#{$prefix} {
      &-base {
        background-color: var(--primary-color);
      }

      &-indicator {
        inset: 2px 2px 2px calc(100% - var(--adui-switch-indicator-size) - 2px);
      }
    }
  }
  &-disabled {
    cursor: not-allowed;

    .#{$prefix} {
      &-base {
        opacity: 0.5;
      }
      &-indicator {
        opacity: 0.9;
      }
      &-text {
        color: var(--gray-700);
      }
    }
  }
  &-base {
    position: relative;
    display: inline-block;
    width: var(--adui-switch-width);
    height: calc(var(--adui-switch-indicator-size) + 4px);
    vertical-align: calc(
      -0.125em - (
          var(--adui-switch-indicator-size) + 4px - var(--adui-switch-font-size)
        ) / 2
    );
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    transition: var(--adui-motion-duration-base) var(--adui-motion-ease-base)
      all;
  }
  &-indicator {
    position: absolute;
    inset: 2px calc(100% - var(--adui-switch-indicator-size) - 2px) 2px 2px;
    background-color: #fff;
    border-radius: var(--adui-switch-indicator-size);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05),
      0 5px 10px 0 rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03);
    transition: var(--adui-motion-duration-base) var(--adui-motion-ease-base)
      all;
  }
  &-text {
    margin-left: 8px;
  }

  /* 尺寸 sizes */
  &-large {
    --adui-switch-width: var(--adui-switch-width-lg);
    --adui-switch-font-size: var(--adui-switch-font-size-lg);
    --adui-switch-indicator-size: var(--adui-switch-indicator-size-lg);
  }
  &-medium {
    --adui-switch-width: var(--adui-switch-width-md);
    --adui-switch-font-size: var(--adui-switch-font-size-md);
    --adui-switch-indicator-size: var(--adui-switch-indicator-size-md);
  }
  &-small {
    --adui-switch-width: var(--adui-switch-width-sm);
    --adui-switch-font-size: var(--adui-switch-font-size-sm);
    --adui-switch-indicator-size: var(--adui-switch-indicator-size-sm);
  }
  &-mini {
    --adui-switch-width: var(--adui-switch-width-mn);
    --adui-switch-font-size: var(--adui-switch-font-size-mn);
    --adui-switch-indicator-size: var(--adui-switch-indicator-size-mn);
  }
}