@use "../theme.scss" as *;

.flip-switch.rounded {
  border-radius: $flip-switch-border-radius;

  & .flip-switch-knob {
    border-radius: $flip-switch-knob-border-radius;
  }

  & .flip-switch-label {
    border-radius: $flip-switch-border-radius;
  }
}

.flip-switch {
  display: inline-block;
  background-color: $flip-switch-bg-color;
  position: relative;
  width: $flip-switch-width;
  height: $flip-switch-height;
  user-select: none;
  border-width: 0;
  border-style: solid;
  border-color: $flip-switch-border-color;
  cursor: pointer;

  &.flip-switch-pressed {
    & .flip-switch-track {
      margin-left: 0;
    }

    & .flip-switch-knob {
      left: calc(100% - 1.8em);
    }
  }

  & .flip-switch-knob {
    width: $flip-switch-knob-width;
    height: $flip-switch-knob-height;
    margin: $flip-switch-knob-margin;
    background-color: $flip-switch-knob-bg-color;
    border: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    transition: all 0.2s ease-in 0s;
  }

  &:focus-visible,
  &.focused {
    outline: 0;
    box-shadow: 0 0 0 0.25rem $focus-outline-default-shadow-color;
  }
}

.flip-switch-label {
  display: block;
  overflow: hidden;
  border: 0;
  background-color: $app-viewport-bg-color;
  cursor: pointer;
  height: 100%;
}

.flip-switch-track {
  width: 200%;
  margin-left: -100%;
  transition: margin 0.2s ease-in 0s;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100%;

  & .flip-switch-active,
  & .flip-switch-inactive {
    width: 50%;
    //height: 2em; // Add a height so that it works without the labels
    padding: 0 0.5em;
    line-height: $flip-switch-height;
    font-weight: bold;
    box-sizing: border-box;
  }

  & .flip-switch-active {
    background-color: $flip-switch-active-bg-color;
    color: $flip-switch-active-color;
    text-align: left;
  }

  & .flip-switch-inactive {
    text-align: right;
  }
}

.flip-switch.disabled,
.flip-switch.disabled:hover,
.flip-switch.disabled:active,
.flip-switch.disabled:focus-visible {
  cursor: default;
  color: $flip-switch-disabled-color;
  background-color: $flip-switch-disabled-bg-color;
  border-color: $flip-switch-disabled-border-color;

  & .flip-switch-label {
    cursor: default;
  }

  & .flip-switch-knob {
    background-color: $flip-switch-disabled-knob-bg-color;
  }

  & .flip-switch-track {
    & .flip-switch-active {
      background-color: $flip-switch-disabled-active-bg-color;
      color: inherit;
    }
  }
}