@import "../../../scss/typo.mixins";
@import "../../../scss/breakpoints.mixins";

.segmented-control-item {
  @extend %typo-18;

  position: relative;
  margin: 0 1px 0 0;
  user-select: none;
}

.segmented-control-item__input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.segmented-control-item__text {
  @extend %typo-18;

  display: block;
  padding: 4px 20px;
  color: $color-mineshaft;
  text-transform: uppercase;
  cursor: pointer;
  background: $color-mercury;
  border: 1px solid $color-dusty-gray;
  border-bottom: 2px solid $color-mineshaft;

  @include media-breakpoint-up(tablet) {
    padding-top: 9px;
    padding-bottom: 8px;
  }

  .segmented-control-item__input:disabled ~ & {
    color: $color-dusty-gray;
  }

  .segmented-control-item__input:focus ~ &,
  .segmented-control-item:hover .segmented-control-item__input:not(:disabled) ~ & {
    color: $color-azure;
    border-color: $color-azure;
  }

  .segmented-control-item .segmented-control-item__input:checked:not(:disabled) ~ &, // :not(:disabled) and .segmented-control-item is used to give this more specifity than the :hover effect
  .segmented-control-item__input:active:not(:disabled) ~ & {
    background: #fff;
    border-bottom-color: $color-azure;
  }
}