@import './var.less';

:root {}

.@{prefix}-switch {
  display: inline-block;
  font-size: 22px;
  position: relative;
  height: 1.192308em;
  width: 1.961538em;
  border-radius: 22px;
  background-color: var(--background-dialogue-pressed);
  transition: background-color 0.3s;

  &_disabled {
    opacity: 0.5;
  }

  &:not(&_disabled):active {
    opacity: 0.8;
  }

  &::after {
    content: "";
    position: absolute;
    border-radius: 100%;
    background-color: #fff;
    transition: transform 0.3s;
    left: 0.19307em;
    top: 0.19307em;
    width: 0.8em;
    height: 0.8em;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  }

  &_checked {
    border-color: var(--brand-standard);
    background-color: var(--brand-standard);

    &::after {
      transform: translateX(0.769231em);
      transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.27, 1.27);
    }
  }
}