segment-button.ionic.scss

@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./segment-button.common";

// Ionic Segment Button
// --------------------------------------------------

:host {
  /**
   * @prop --color-disabled: Color of the disabled segment button
   */
  --background: none;
  --background-checked: var(--background);
  --color: #{globals.$ion-primitives-neutral-1000};
  --color-checked: #{globals.$ion-semantics-primary-base};
  --color-disabled: #{globals.$ion-primitives-neutral-500};
  --border-width: #{globals.$ion-border-size-025};
  --border-color: #{globals.$ion-primitives-neutral-300};
  --border-style: #{globals.$ion-border-style-solid};
  --indicator-box-shadow: none;
  --indicator-color: var(--color-checked);
  --indicator-height: #{globals.$ion-border-size-025};
  --indicator-transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --indicator-transform: none;
  --padding-top: #{globals.$ion-space-200};
  --padding-end: #{globals.$ion-space-200};
  --padding-bottom: #{globals.$ion-space-200};
  --padding-start: #{globals.$ion-space-200};
  --transition: color 0.15s linear 0s, opacity 0.15s linear 0s;

  min-width: globals.$ion-scale-1200;
  min-height: globals.$ion-scale-1200;
}

.button-native {
  border-bottom: var(--border-width) var(--border-style) var(--border-color);

  // Ensures the indicator moves correctly between segment buttons
  z-index: 1;
}

.button-inner {
  @include globals.padding(globals.$ion-space-100, null, globals.$ion-space-100, null);

  gap: globals.$ion-space-100;
}

// Segment Button Label/Text
// --------------------------------------------------

::slotted(ion-label),
::slotted(ion-text) {
  @include globals.typography(globals.$ion-body-action-sm);

  color: var(--color);
}

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

::slotted(ion-icon) {
  width: globals.$ion-scale-600;
  height: globals.$ion-scale-600;

  color: var(--color);
}

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

:host(.segment-button-checked) ::slotted(ion-label),
:host(.segment-button-checked) ::slotted(ion-text),
:host(.segment-button-checked) ::slotted(ion-icon) {
  color: var(--color-checked);
}

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

:host(.segment-button-disabled) ::slotted(ion-label),
:host(.segment-button-disabled) ::slotted(ion-text),
:host(.segment-button-disabled) ::slotted(ion-icon) {
  color: var(--color-disabled);
}

// Segment Button: Focused
// --------------------------------------------------

:host(.ion-focused) .button-inner {
  @include globals.focused-state();
}

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

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

  // Ensures the indicator displays correctly above the border
  z-index: 2;
}

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

// Segments with icons above or below the label
// should have a fixed height of 72px
:host(.segment-button-layout-icon-top),
:host(.segment-button-layout-icon-bottom) {
  height: globals.$ion-scale-1800;
}

// Segments with icons at the start or end, or with only
// icons or labels, should have a fixed height of 48px
:host(.segment-button-has-label-only),
:host(.segment-button-has-icon-only),
:host(.segment-button-layout-icon-start),
:host(.segment-button-layout-icon-end) {
  height: globals.$ion-scale-1200;
}

:host(.segment-button-layout-icon-start) .button-inner,
:host(.segment-button-layout-icon-end) .button-inner {
  gap: globals.$ion-space-200;
}