@use '../../_styles/mixin.scss' as *;

.o-switch {
  display: inline-block;
  height: var(--switch-size);
  font-size: var(--switch-text-size);
  line-height: var(--switch-text-height);
  color: var(--switch-color);
  background-color: var(--switch-bg-color);
  border-radius: var(--switch-radius);
  transition: background-color var(--o-duration-s) var(--o-easing-standard);
  cursor: pointer;
  min-width: var(--switch-min-width);

  @include hover {
    background-color: var(--switch-bg-color-hover);
  }
  &:active {
    background-color: var(--switch-bg-color-active);
  }

  .o-svg-icon {
    width: var(--switch-icon-size);
    height: var(--switch-icon-size);
  }
}

.o-switch-wrap {
  position: relative;
  height: 100%;
}

.o-switch-handler {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--switch-handler-size);
  height: var(--switch-handler-size);
  color: var(--switch-handler-color);
  border-radius: calc(var(--switch-radius) - 2px);
  background-color: var(--switch-handler-bg-color);
  transition: left var(--o-duration-s) var(--o-easing-standard);
  left: var(--switch-handler-offset);

  .o-switch-icon-loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--switch-bg-color);
  }
}

.o-switch-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.o-switch-checked {
  background-color: var(--switch-bg-color-checked);

  .o-switch-handler {
    left: calc(100% - var(--switch-handler-offset) - var(--switch-handler-size));
  }

  .o-switch-label {
    padding-left: var(--switch-label-padding);
    padding-right: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-label-padding));
  }

  @include hover {
    background-color: var(--switch-bg-color-checked-hover);
  }
  &:active {
    background-color: var(--switch-bg-color-checked-active);
  }
}

.o-switch-disabled,
.o-switch-loading {
  cursor: not-allowed;
  &,
  &:hover,
  &:active {
    background-color: var(--switch-bg-color-disabled);
    .o-switch-handler {
      background-color: var(--switch-handler-bg-color-disabled);
      .o-switch-icon-loading {
        color: var(--switch-icon-loading-color);
      }
    }
  }
}

.o-switch-disabled.o-switch-checked,
.o-switch-loading.o-switch-checked {
  &,
  &:hover,
  &:active {
    background-color: var(--switch-bg-color-checked-disabled);
    .o-switch-handler {
      background-color: var(--switch-handler-bg-color-checked-disabled);
    }
  }
}

.o-switch-label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-label-padding));
  padding-right: var(--switch-label-padding);
}