// COMPONENT: Segmented Control: allows for toggling between two or more states
.segmented-control
  @extend %input-fixed-height

  align-items: stretch
  border-width: 0
  display: inline-flex
  list-style: none

  &--round
    border-radius: 1000px

  &--scrollable
    +small-screen
      overflow: auto

  .segmented-control-item
    align-items: stretch
    display: flex
    justify-content: stretch

    &:first-child
      border-bottom-left-radius: inherit
      border-top-left-radius: inherit

    &:last-child
      border-bottom-right-radius: inherit
      border-top-right-radius: inherit

    .segmented-control-item-label
      display: inline-block
      margin-left: $input-padding

      +large-screen
        &:first-child
          margin-left: 0


      +medium-screen
        display: none

    .segmented-control-item-icon
      +large-screen
        display: none

        + .segmented-control-item-label
          margin-left: 0

    > *
      border-radius: inherit
      border: 1px solid $border
      cursor: pointer
      display: block
      height: 100%
      padding: 0 round($input-padding * 1.5)
      text-decoration: none
      white-space: nowrap

      &:active
        border-color: $text

      &:focus
        position: relative

      &[aria-pressed=true],
      &.segmented-control-item-link--active
        background-color: $text
        border-color: $text
        color: $text-light
        position: relative

    &--collapse
      +medium-screen
        display: none

    + .segmented-control-item
      margin-left: -1px
