// ============================================================================
// :: Switch
// ============================================================================
/**
 * Component used to switch between two states. It makes use of a checkbox to
 * simulate the states.
 */

// ============================================================================
// :: Root
// ============================================================================
.a-switch {
  position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.a-switch__checkbox {
  display: none;
}

.a-switch__container {
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

.a-switch__text {
  color: $text-color-base;

  transition: color 0.2s ease-in-out;
}

.a-switch__button {
  position: relative;

  width: 2.6rem;
  min-width: 2.6rem;
  height: 1.65rem;
  min-height: 1.65rem;
  margin: 0 1rem;
}

.a-switch__outer {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  // not placed in variabeles because it is quit custom
  border: 0.2rem solid $primary-color-base;
  border-radius: 10rem;
}

.a-switch__inner-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transform-origin: center;

  width: calc(100% - 0.6rem);
  height: calc(100% - 0.65rem);
  overflow: hidden;

  // not placed in variabeles because it is quit custom
  border-radius: 10rem;
}

.a-switch__inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);

  background-color: $primary-color-base;
  // not placed in variabeles because it is quit custom
  border-radius: 10rem;

  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

// ============================================================================
// :: States
// ============================================================================
.a-switch__checkbox {

  &:not(:checked) + .a-switch__container {

    .a-switch__text--off {
      color: $primary-color-base;
    }
  }

  &:checked + .a-switch__container {

    .a-switch__text--on {
      color: $primary-color-base;
    }

    .a-switch__inner {
      transform: translateX(50%);
    }
  }
}

.a-switch.is-disabled {

  .a-switch__container:hover {
    cursor: not-allowed;
  }

  .a-switch__outer {
    border-color: $background-color-disabled;
  }

  .a-switch__inner {
    background-color: $background-color-disabled;
  }

  .a-switch__text {
    color: $text-color-disabled !important;
  }
}