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

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

:host {
  --background: transparent;
}

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

// Segment: Color
// --------------------------------------------------

:host(.ion-color) ::slotted(ion-segment-button) {
  --ripple-color: #{current-color(base)};
  --indicator-color: #{current-color(base)};

  background: transparent;
  color: $segment-button-md-text-color;
}

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

@media (any-hover: hover) {
  :host(.ion-color) ::slotted(ion-segment-button:hover) {
    background: #{current-color(base, .04)};
  }
}

// Segment: Default Toolbar
// --------------------------------------------------

// Default Segment, In a Toolbar
:host(.in-toolbar:not(.ion-color)) ::slotted(ion-segment-button) {
  --indicator-color: #{var(--ion-toolbar-segment-color-checked, var(--color-checked))};

  background: #{var(--ion-toolbar-segment-background, var(--background))};
  color: #{var(--ion-toolbar-segment-color, var(--color))};
}

// Default Segment, In a Toolbar, Checked
:host(.in-toolbar:not(.ion-color)) ::slotted(.segment-button-checked) {
  background: #{var(--ion-toolbar-segment-background-checked, var(--background-checked))};
  color: #{var(--ion-toolbar-segment-color-checked, var(--color-checked))};
}


// Segment: Toolbar Color
// --------------------------------------------------

// Default Segment, In a Toolbar with Color
:host(.in-toolbar-color:not(.ion-color)) ::slotted(ion-segment-button) {
  color: #{current-color(contrast, .6)};
}

// Default Segment, In a Toolbar with Color, Checked
:host(.in-toolbar-color:not(.ion-color)) ::slotted(.segment-button-checked) {
  color: #{current-color(contrast)};
}


// Segment: Toolbar Hover
// --------------------------------------------------

@media (any-hover: hover) {
  // Default Segment, In a Toolbar with Color, Hover
  :host(.in-toolbar-color:not(.ion-color)) ::slotted(ion-segment-button:hover) {
    background: #{ion-color(primary, contrast, .04)};
  }
}


// Segment: Scrollable
// --------------------------------------------------

:host(.segment-scrollable) ::slotted(ion-segment-button) {
  min-width: $segment-button-md-min-width;
}