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

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

:host {
  --background: transparent;
  --background-checked: transparent;
  --border-color: #{$segment-button-md-border-bottom-color};
  --color: #{$segment-button-md-text-color};
  --color-checked: #{$segment-button-md-text-color};
}

: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};
  --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;

  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
// --------------------------------------------------

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

::slotted(.activated),
::slotted(.segment-button-checked) {
  opacity: $segment-button-md-opacity-activated;
}

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

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

// In Toolbar
// --------------------------------------------------

:host(.in-color-toolbar:not(.ion-color)) {
  --color: #{current-color(contrast)};
  --color-checked: #{current-color(contrast)};
}
