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

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

:host {
  --background: transparent;
  --background-checked: #{ion-color(primary, base)};
  --border-color: currentColor;
  --border-color-checked: #{ion-color(primary, base)};
  --border-color-disabled: #{ion-color(primary, base)};
  --color: #{ion-color(primary, base)};
  --color-checked: #{ion-color(primary, contrast)};
  --color-disabled: #{ion-color(primary, base, $segment-button-ios-opacity-disabled)};
}

: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;
  --transition: 100ms all linear;
  --icon-size: #{$segment-button-ios-icon-size};

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

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

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

::slotted(.segment-button-disabled) {
  --border-color: var(--border-color-disabled);
  --color: var(--color-disabled);
}

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

// 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:not(.ion-color)) {
  --color: #{current-color(contrast)};
  --color-checked: #{current-color(base)};
  --color-disabled: #{current-color(contrast, $segment-button-ios-opacity-disabled)};
  --background-checked: #{current-color(contrast)};
  --border-color-checked: #{current-color(contrast)};
  --border-color-disabled: #{current-color(contrast)};
}
