@import "./breadcrumb";
@import "./breadcrumb.ios.vars";

// Breadcrumb
// --------------------------------------------------

:host {
  --color: #{$breadcrumb-ios-color};
  --color-active: #{$breadcrumb-ios-color-active};
  --color-hover: #{$breadcrumb-ios-color-active};
  --color-focused: var(--color-active);
  --background-focused: #{$breadcrumb-ios-background-focused};

  /**
   * Main content should be prioritized
   * on iOS, so we set max font size for breadcrumbs.
   * Breadcrumbs can be placed in the content too, so
   * we add a min font size to keep the text legible.
   */
  font-size: dynamic-font-clamp(1, $breadcrumb-baseline-font-size, 1.375);
}

:host(.breadcrumb-active) {
  font-weight: 600;
}

.breadcrumb-native {
  @include border-radius(4px);
  @include padding(5px, 12px, 5px, 12px);

  border: 1px solid transparent;
}


// Breadcrumb: Focused
// ------------------------------------------

:host(.ion-focused) .breadcrumb-native {
  @include border-radius(8px);
}

:host(.in-breadcrumbs-color.ion-focused) .breadcrumb-native,
:host(.ion-color.ion-focused) .breadcrumb-native {
  background: #{current-color(base, .1)};
  color: #{current-color(base)};
}

:host(.ion-focused) ::slotted(ion-icon),
:host(.in-breadcrumbs-color.ion-focused) ::slotted(ion-icon),
:host(.ion-color.ion-focused) ::slotted(ion-icon) {
  color: $breadcrumb-ios-icon-color-focused;
}


// Breadcrumb Separator
// ------------------------------------------

.breadcrumb-separator {
  color: $breadcrumb-ios-separator-color;
}


// Breadcrumb Slotted Icons
// ------------------------------------------

::slotted(ion-icon) {
  color: $breadcrumb-ios-icon-color;

  font-size: dynamic-font-max(18px, 1.2);
}

::slotted(ion-icon[slot="start"]) {
  @include margin(null, 8px, null, null);
}

::slotted(ion-icon[slot="end"]) {
  @include margin(null, null, null, 8px);
}

:host(.breadcrumb-active) ::slotted(ion-icon) {
  color: $breadcrumb-ios-icon-color-active;
}


// Breadcrumbs Collapsed Indicator
// --------------------------------------------------

.breadcrumbs-collapsed-indicator {
  @include border-radius(4px);

  background: $breadcrumb-ios-indicator-background;

  color: $breadcrumb-ios-indicator-color;
}

.breadcrumbs-collapsed-indicator:hover {
  opacity: 0.45;
}

.breadcrumbs-collapsed-indicator:focus {
  background: $breadcrumb-ios-indicator-background-focused;
}

.breadcrumbs-collapsed-indicator ion-icon {
  font-size: dynamic-font-max(22px, 1);
}