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

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

:host {
  font-family: $segment-ios-font-family;
}

:host(.segment-disabled) {
  opacity: $segment-ios-opacity-disabled;
}

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

::slotted(ion-segment-button) {
  --border-radius: #{$segment-button-ios-border-radius};
  --border-width: #{$segment-button-ios-border-width};
  --border-style: solid;
  --border-color: #{current-color(base)};
  --background: transparent;
  --transition: 100ms all linear;
  --icon-size: #{$segment-button-ios-icon-size};

  height: #{$segment-button-ios-height};

  color: #{current-color(base)};

  font-size: #{$segment-button-ios-font-size};

  line-height: #{$segment-button-ios-line-height};
}

::slotted(.segment-checked) {
  --background: #{current-color(base)};

  color: #{current-color(contrast)};
}

::slotted(.segment-button-disabled) {
  color: #{current-color(base, $segment-button-ios-background-color-alpha-disabled)};
}

::slotted(ion-segment-button):hover:not(.segment-checked) {
  --background: #{current-color(base, $segment-button-ios-background-color-alpha-hover)};
}

::slotted(ion-segment-button):active:not(.segment-checked) {
  --background: #{current-color(base, $segment-button-ios-background-color-alpha-active)};
}


// iOS Segment in Toolbar
// --------------------------------------------------
:host(.in-toolbar) {
  @include position(0, 0, 0, 0);

  position: absolute;
}

:host(.in-toolbar) ::slotted(ion-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;
}

:host(.in-color-toolbar) {
  --ion-color-base: inherit;
}

:host(.in-color-toolbar) ::slotted(ion-segment-button) {
  --border-color: currentColor;

  color: inherit;
}

:host(.in-color-toolbar) ::slotted(ion-segment-button.segment-checked) {
  --background: #{current-color(contrast)};
  --border-color: #{current-color(contrast)};

  color: #{current-color(base)};
}