@import "./segment.native";
@import "./segment.ios.vars";

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

:host {
  --background: #{$segment-ios-background-color};

  @include border-radius($segment-ios-border-radius);

  overflow: hidden;

  z-index: 0;
}

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

:host(.ion-color) {
  background: #{current-color(base, 0.065)};
}

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

:host(.in-toolbar) {
  @include margin(0, auto);

  width: auto;
}

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

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

// Toolbar with Color, Default Segment
:host(.in-toolbar-color:not(.ion-color)) {
  background: #{current-color(contrast, 0.11)};
}