// ============================================================================
// :: Toggle
// ============================================================================
/**
 * This is a toggle which extends from a radio-button
 */

// ============================================================================
// :: Root
// ============================================================================
.a-toggle {
  --toggle-background-color: #{$background-color-base};
  --toggle-padding: 2rem 3rem;

  display: inline-block;
}

// ============================================================================
// :: Elements
// ============================================================================
.a-toggle__radio[type="radio"] {
  display: none;
}

.a-toggle__content {
  padding: var(--toggle-padding);

  background-color: var(--toggle-background-color);
  border: 0.2rem solid $background-color-base;
  border-radius: $border-radius-base;

  text-align: center;

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

  &:hover {
    border-color: $border-color-1x-light;

    cursor: pointer;
  }
}

.a-toggle__icon,
.a-toggle__text {
  transition: color 0.2s ease-in-out;
}

.a-toggle__icon {
  margin-bottom: 0.5rem;

  font-size: $font-size-3x-large;
}

.a-toggle__text {
  font-weight: $font-weight-bold;
}

// ============================================================================
// :: States
// ============================================================================
.a-toggle__radio[type="radio"]:checked + .a-toggle__content {
  border-color: $primary-color-base;

  .a-toggle__icon,
  .a-toggle__text {
    color: $primary-color-base;
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.a-toggle--white {
  --toggle-background-color: #{$background-color-white};
}

.a-toggle--fill-space {
  width: 100%;
}

.a-toggle--small {
  --toggle-padding: 1.2rem 1.6rem;
}