@import "~monday-ui-style/dist/mixins";

.toggle {
  @include reset-button();
  transition: background-color var(--motion-productive-medium) var(--motion-timing-transition);
  margin: 0 var(--spacing-small);
  position: relative;
  height: var(--toggle-height);
  width: var(--toggle-width);
  cursor: pointer;
  border-radius: 100px !important;

  &::after {
    background-color: var(--primary-background-color);
    content: " ";
    position: absolute;
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    top: calc(50% - 18px / 2);
    transition: left var(--motion-productive-medium) var(--motion-timing-transition);
  }

  &.selected {
    background-color: var(--primary-color);
    &::after {
      left: 20px;
    }
  }

  &.notSelected {
    background-color: var(--ui-border-color);
    &::after {
      left: 3px;
    }
  }

  &.disabled {
    opacity: var(--disabled-component-opacity);
    cursor: not-allowed;
  }

  &.medium {
    --toggle-width: 41px;
    --toggle-height: 24px;
    &::after {
      --circle-size: 18px;
    }
  }

  &.small {
    --toggle-width: 28px;
    --toggle-height: 16px;
    &::after {
      --circle-size: 12px;
      top: calc(50% - 6px);
      left: 14px;
    }
    &.notSelected {
      &::after {
        left: 2px;
      }
    }
  }
}