// iOS Segment
// --------------------------------------------------

$segment-button-ios-border-width:             1px !default;
$segment-button-ios-min-height:               3.0rem !default;
$segment-button-ios-line-height:              3.0rem !default;
$segment-button-ios-bg-color:                 transparent !default;
$segment-button-ios-font-size:                1.3rem !default;

$segment-button-ios-bg-color-activated:       color(primary) !default;
$segment-button-ios-text-color:               inverse($segment-button-ios-bg-color-activated) !default;
$segment-button-ios-activated-transition:     100ms all linear !default;
$segment-button-ios-hover-opacity:            0.16 !default;


.ion-segment {

  button,
  [button] {
    border-width: $segment-button-ios-border-width;
    border-style: solid;

    min-height: $segment-button-ios-min-height;
    line-height: $segment-button-ios-line-height;

    background-color: $segment-button-ios-bg-color;
    color: $segment-button-ios-text-color;
    font-size: $segment-button-ios-font-size;

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

      &.activated {
        opacity: 1;
        color: $segment-button-ios-text-color;
        background-color: $segment-button-ios-bg-color-activated;
        transition: $segment-button-ios-activated-transition;
      }

      &:hover:not(.activated) {
        background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity);
      }
    }

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

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

}

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

@each $color, $value in $colors {

  ion-segment[#{$color}] {

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

      background-color: transparent;
      color: $text-color;

      &[outline] {
        border-color: $bg-color;
        background: $segment-button-ios-bg-color;
        color: $bg-color;

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

        &:hover:not(.activated) {
          background-color: rgba($bg-color, $segment-button-ios-hover-opacity);
        }
      }
    }
  }
}