// Segment
// --------------------------------------------------


ion-segment {
  display: block;
}

.ion-segment {
  display: flex;
  flex: 1;
  width: 100%;

  button,
  [button] {

    margin-left: 0;
    margin-right: 0;

    flex: 1;
    display: block;
    overflow: hidden;

    padding: 0 16px;
    width: 0;

    border-width: 1px 0px 1px 1px;
    border-radius: 0;

    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;

    background: none;

    &:first-of-type {
      border-radius: $button-border-radius 0px 0px $button-border-radius;
    }

    &:last-of-type {
      border-right-width: 1px;
      border-radius: 0px $button-border-radius $button-border-radius 0px;
    }

  }

}

// Generate Default Button Colors
// --------------------------------------------------

@each $color, $value in $colors {

  ion-segment[#{$color}] {

    ion-segment-button[button] {
      $bg-color: $value;
      $bg-color-activated: darken-or-lighten($bg-color);
      $text-color: inverse($bg-color);

      background-color: $bg-color;
      color: $text-color;

      &.activated {
        background-color: $bg-color-activated;
      }

      &[outline] {
        border: 1px solid $bg-color;
        background: $background-color;
        color: $bg-color;

        &.activated {
          opacity: 1;
          color: $text-color;
          background-color: $bg-color;
        }
      }

    }

  }

}