segment-button.ios.scss

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

// iOS Segment Button
// --------------------------------------------------

:host {
  --background: #{$segment-button-ios-background-color};
  --background-checked: #{$segment-button-ios-background-color-checked};
  --background-hover: #{$segment-button-ios-background-color-hover};
  --border-radius: #{$segment-button-ios-border-radius};
  --border-width: #{$segment-button-ios-border-width};
  --border-color: #{$segment-button-ios-border-color};
  --border-style: solid;
  --indicator-box-shadow: #{$segment-button-ios-box-shadow-checked};
  --indicator-color: #{$segment-button-ios-indicator-color};
  --indicator-transition: #{$segment-button-ios-transition-animated};
  --indicator-transform: none;
  --transition: #{$segment-button-ios-transition};
  --padding-top: 0;
  --padding-end: 13px;
  --padding-bottom: 0;
  --padding-start: 13px;

  @include margin($segment-button-ios-margin, null, $segment-button-ios-margin, null);

  position: relative;

  flex-basis: 0;
  flex-direction: row;

  min-width: #{$segment-button-ios-min-width};

  min-height: #{$segment-button-ios-min-height};

  // Necessary for the z-index to work properly
  transform: translate3d(0, 0, 0);

  font-size: #{$segment-button-ios-font-size};

  font-weight: 450;

  line-height: #{$segment-button-ios-line-height};
}


// Segment Button: Borders
// --------------------------------------------------

:host::before {
  @include margin(5px, 0);

  transition: 160ms opacity ease-in-out;

  transition-delay: 100ms;

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

  content: "";
  opacity: 1;

  will-change: opacity;
}

:host(:first-of-type)::before {
  border-left-color: transparent;
}


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

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


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

::slotted(ion-icon) {
  font-size: $segment-button-ios-icon-size;
}


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

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

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


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

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

.segment-button-indicator-background {
  @include border-radius($segment-button-ios-border-radius);

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

.segment-button-indicator-background {
  transition: var(--indicator-transition);
}


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

:host(.segment-button-checked)::before,
:host(.segment-button-after-checked)::before {
  opacity: 0;
}


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

:host(.segment-button-checked) {
  z-index: -1;
}


// Segment Button: Toolbar
// --------------------------------------------------

// Segment button indicator color should use the global variable with
// a fallback to the local variable
: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: #fff;
}