@import "../../../ionic.globals";
@import "../segment";

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

$segment-button-md-font-size:                  1.2rem !default;
$segment-button-md-min-height:                 4.0rem !default;
$segment-button-md-line-height:                4.0rem !default;

$segment-button-md-text-color-activated:       color(primary) !default;
$segment-button-md-border-color-activated:     color(primary) !default;
$segment-button-md-border-bottom:              2px solid rgba(#000000, 0.10) !default;


ion-segment {

  button,
  [button] {
    border-width: 0;
    transition: 100ms all linear;
    font-size: $segment-button-md-font-size;
    opacity: 0.7;

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

    &.activated, &.segment-activated {
      color: $segment-button-md-text-color-activated;
      background-color: transparent;
      border-color: $segment-button-md-border-color-activated;
    }

    border-radius: 0;
    border-bottom: $segment-button-md-border-bottom;
  }

}

.toolbar {

  ion-segment {
    margin: 0 auto;

    ion-segment-button[button][outline].activated,
    ion-segment-button[button][outline].segment-activated {
      background-color: transparent;
    }
  }

}

// Generate Default Segment Colors
// --------------------------------------------------

@mixin segment-button($button-color) {
  background-color: transparent;

  &[outline] {
    color: $button-color;

    &.activated, &.segment-activated {
      background-color: transparent;
      color: $button-color;
      border-color: $button-color;
      opacity: 1;
    }
  }
}

// Loop through all of the colors to change the segment colors
// based on the toolbar color or if it isn't in a toolbar then based on
// the segment color value
@each $color-name, $color-value in $colors {
  $inverse-color-value: inverse($color-value);

  .toolbar[#{$color-name}] {

    ion-segment {
      ion-segment-button[button] {
        @include segment-button($inverse-color-value);
      }
    }

    // Loop through all of the colors again to change the segment colors
    // for each toolbar based on the segment color
    // this will take priority over the default toolbar colors
    @each $color-name, $color-value in $colors {
      ion-segment[#{$color-name}] {
        ion-segment-button[button] {
          @include segment-button($color-value);
        }
      }
    }

  }

  ion-segment[#{$color-name}] {
    ion-segment-button[button] {
      @include segment-button($color-value);
    }

  }
}