.segment {
  @extend .grid-x;
  border-radius: 2px;
  &__option {
    @extend .cell;
    padding: rem-calc(5 8);
    border: 1px solid $gray;
    border-right: none;
    text-align: center;
    font-weight: 600;
    color: $gray;
    cursor: pointer;
    &--active {
      background-color: $primary-color;
      color: $white;
      border-color: $primary-color;
      &+.segment__option {
        border-left: $primary-color;
      }
    }
    &:last-of-type {
      border-right: 1px solid $gray;
    }
    &:first-of-type.segment__option--active,
    &:last-of-type.segment__option--active {
      border-color: $primary-color;
    }
    &:first-of-type {
      border-radius: rem-calc(5 0 0 5);
    }
    &:last-of-type {
      border-radius: rem-calc(0 5 5 0);
    }
  }
}