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

// Material Design Segment
// --------------------------------------------------

:host {
  color: $segment-button-md-text-color;

  font-family: $segment-md-font-family;
}

:host(.ion-color) {
  // TODO can we remove important here
  /* stylelint-disable-next-line declaration-no-important */
  color: #{current-color(base)} !important;
}

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

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

// Material Design Segment Button
// --------------------------------------------------

::slotted(ion-segment-button) {
  --padding-top: #{$segment-button-md-padding-top};
  --padding-end: #{$segment-button-md-padding-end};
  --padding-bottom: #{$segment-button-md-padding-bottom};
  --padding-start: #{$segment-button-md-padding-start};
  --background: transparent;
  --border-color: #{$segment-button-md-border-bottom-color};
  --border-width: #{0 0 $segment-button-md-border-bottom-width 0};
  --border-style: solid;
  --opacity: #{$segment-button-md-opacity};
  --transition: #{$segment-button-md-transition};
  --icon-size: #{$segment-button-md-icon-size};

  height: $segment-button-md-height;

  color: inherit;

  font-size: $segment-button-md-font-size;
  font-weight: $segment-button-md-font-weight;

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

  text-transform: uppercase;

  opacity: $segment-button-md-opacity;
}

// Checked Segment Button
// --------------------------------------------------

::slotted(.activated),
::slotted(.segment-checked) {
  --border-color: currentColor;

  opacity: $segment-button-md-opacity-activated;
}

// Disabled Segment Button
// --------------------------------------------------

::slotted(.segment-button-disabled) {
  opacity: $segment-button-md-opacity-disabled;
}