@use '../core/styles' as sbb;

$theme: 'standard' !default;

@mixin base {
  --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
  --sbb-breadcrumb-color-hover: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke));
  --sbb-breadcrumb-color-active: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
  --sbb-breadcrumb-font-size: var(--sbb-text-font-size-xs);
  --sbb-breadcrumb-gap: var(--sbb-spacing-fixed-2x);
  --sbb-breadcrumb-group-wrap: nowrap;
  --sbb-breadcrumb-group-visibility: hidden;
  --sbb-breadcrumb-group-ellipsis-color: light-dark(
    var(--sbb-color-granite),
    var(--sbb-color-cloud)
  );
  --sbb-breadcrumb-group-ellipsis-background-color: transparent;
  --sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);
  --sbb-breadcrumb-group-ellipsis-border-color: light-dark(
    var(--sbb-color-silver),
    var(--sbb-color-anthracite)
  );
}

@mixin forced-colors {
  --sbb-breadcrumb-color: ButtonText;
  --sbb-breadcrumb-color-active: Highlight;
}

@mixin rules {
  sbb-breadcrumb-group:not(:defined) {
    display: block;
    height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
    overflow: hidden;
  }
}