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

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

:host {
  --background: #{$segment-button-md-background};
  --background-checked: #{$segment-button-md-background-checked};
  --background-hover: #{$segment-button-md-background-hover};
  --color: #{$segment-button-md-text-color};
  --color-checked: #{$segment-button-md-text-color-checked};
  --indicator-box-shadow: none;
  --indicator-color: var(--color-checked);
  --indicator-transition: #{$segment-button-md-transition-animated};
  --indicator-transform: none;
  --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};
  --transition: #{$segment-button-md-transition};

  min-width: $segment-button-md-min-width;

  max-width: $segment-button-md-max-width;
  min-height: $segment-button-md-min-height;

  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);

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

  letter-spacing: $segment-button-md-letter-spacing;

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

  text-transform: uppercase;
}


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

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

// Segment Button: Icon
// --------------------------------------------------

::slotted(ion-icon) {
  @include margin(12px, null, 12px, null);

  font-size: $segment-button-md-icon-size;
}

// Segment Button: Label
// --------------------------------------------------

::slotted(ion-label) {
  @include margin(12px, null, 12px, null);
}

// Segment Button: Layout
// --------------------------------------------------

// Layout: icon top / icon bottom
:host(.segment-button-layout-icon-top) ::slotted(ion-label),
:host(.segment-button-layout-icon-bottom) ::slotted(ion-icon) {
  @include margin(0, null, null, null);
}

:host(.segment-button-layout-icon-top) ::slotted(ion-icon),
:host(.segment-button-layout-icon-bottom) ::slotted(ion-label) {
  @include margin(null, null, 0, null);
}

// Layout: icon start
:host(.segment-button-layout-icon-start) ::slotted(ion-label) {
  @include margin-horizontal(8px, 0);
}

// Layout: icon end
:host(.segment-button-layout-icon-end) ::slotted(ion-label) {
  @include margin-horizontal(0, 8px);
}

// Layout: icon only
:host(.segment-button-has-icon-only) ::slotted(ion-icon) {
  @include margin(12px, null, 12px, null);
}

// Layout: label only
:host(.segment-button-has-label-only) ::slotted(ion-label) {
  @include margin(12px, null, 12px, null);
}

// Segment Button: Indicator
// --------------------------------------------------

.segment-button-indicator {
  @include position(null, 0, 0, 0);
}

.segment-button-indicator-background {
  height: 2px;

  background: var(--indicator-color);
}

// Segment button indicator color should use the background checked variable with
// a fallback to the default value of --indicator-color
:host(.in-toolbar) .segment-button-indicator-background {
  background: #{var(--ion-toolbar-segment-indicator-color, var(--indicator-color))};
}

// Do not use the global or local CSS variable if the toolbar has a color
:host(.in-toolbar-color) .segment-button-indicator-background {
  background: #{current-color(contrast)};
}
