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

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

$segment-button-ios-background-color:           transparent !default;
$segment-button-ios-background-color-activated: $toolbar-ios-active-color !default;

$segment-button-ios-text-color:                 color-contrast($colors-ios, $segment-button-ios-background-color-activated) !default;
$segment-button-ios-transition-activated:       100ms all linear !default;
$segment-button-ios-transition-hover:           100ms all linear !default;
$segment-button-ios-transition-active:          100ms all linear !default;

$segment-button-ios-opacity-hover:              .1 !default;
$segment-button-ios-opacity-active:             .16 !default;
$segment-button-ios-opacity-activated:          1 !default;
$segment-button-ios-opacity-disabled:           .3 !default;

$segment-button-ios-border-width:               1px !default;
$segment-button-ios-height:                     3.2rem !default;
$segment-button-ios-line-height:                3rem !default;
$segment-button-ios-font-size:                  1.3rem !default;
$segment-button-ios-border-radius:              4px !default;
$segment-button-ios-icon-size:                  2.6rem !default;
$segment-button-ios-icon-line-height:           2.8rem !default;

$segment-button-ios-toolbar-button-max-width:   100px !default;
$segment-button-ios-toolbar-button-height:      2.6rem !default;
$segment-button-ios-toolbar-line-height:        2.5rem !default;
$segment-button-ios-toolbar-font-size:          1.2rem !default;
$segment-button-ios-toolbar-icon-size:          2.2rem !default;
$segment-button-ios-toolbar-icon-line-height:   2.4rem !default;


.segment-button {
  flex: 1;

  width: 0;

  height: $segment-button-ios-height;

  border-width: $segment-button-ios-border-width;
  border-style: solid;
  border-color: $segment-button-ios-background-color-activated;

  font-size: $segment-button-ios-font-size;
  line-height: $segment-button-ios-line-height;

  color: $segment-button-ios-background-color-activated;
  background-color: $segment-button-ios-background-color;

  ion-icon {
    font-size: $segment-button-ios-icon-size;
    line-height: $segment-button-ios-icon-line-height;
  }

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

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

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

  &:first-of-type {
    margin-right: 0;

    border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius;
  }

  &:not(:first-of-type) {
    border-left-width: 0;
  }

  &:last-of-type {
    margin-left: 0;

    border-left-width: 0;
    border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
  }
}

.segment-button-disabled {
  color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-disabled);

  pointer-events: none;
}

.toolbar {

  ion-segment {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .segment-button {
    max-width: $segment-button-ios-toolbar-button-max-width;
    height: $segment-button-ios-toolbar-button-height;

    font-size: $segment-button-ios-toolbar-font-size;
    line-height: $segment-button-ios-toolbar-line-height;

    ion-icon {
      font-size: $segment-button-ios-toolbar-icon-size;
      line-height: $segment-button-ios-toolbar-icon-line-height;
    }
  }
}


// iOS Segment Button Mixin
// --------------------------------------------------

@mixin ios-segment-button($color-name, $color-base, $color-contrast) {

  ion-segment[#{$color-name}] {

    .segment-button {
      border-color: $color-base;
      color: $color-base;

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

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

      &.segment-activated {
        color: $color-contrast;
        background-color: $color-base;
      }
    }

    .segment-button-disabled {
      color: rgba($color-base, $segment-button-ios-opacity-disabled);
    }

  }

}


// iOS Segment Color Generation
// --------------------------------------------------

@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {

  @include ios-segment-button($color-name, $color-base, $color-contrast);

  .toolbar[#{$color-name}] .segment-button.segment-activated {
    color: $color-base;
  }
}
