/* breadcrumb.st.css */
@namespace "Breadcrumb";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    --font-family-base,
    --base-font-size,
    --color-link,
    --color-accent-2,
    --spacing-unit;
}

:import {
  -st-from: "../../components/Breadcrumb/breadcrumb.st.css";
  -st-default: Breadcrumb;
}

:import {
  -st-from: "../../mixins/link.st.css";
  -st-default: Link;
}

:import {
  -st-from: '../../mixins/ellipsisMixin.st.css';
  -st-named: ellipsisMixin;
}

@st-scope Base {
  Breadcrumb {
    --separator-color: var(--color-accent-2);
    width: 100%;
  }

  Breadcrumb::separator {
    color: var(--separator-color);
    line-height: 0;
  }

  Breadcrumb::navigation {
    /* IE fix */
    display: inline;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 auto;
    max-width: 1160px;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
  }

  Breadcrumb::anchor,
  Breadcrumb::text {
    font-family: var(--font-family-base);
    font-size: var(--base-font-size);
    color: var(--color-link);
    -webkit-font-smoothing: antialiased;
    /* For the svg icon alignment  */
    /* IE fix */
    vertical-align: middle;
    flex-direction: row;
    align-items: center;
    margin-right: 10px;
    margin-left: 10px;
    /* Truncate items when text is too long & display ellipsis */
    -st-mixin: ellipsisMixin;
  }

  Breadcrumb::anchor:first-child,
  Breadcrumb::text:first-child {
    margin-left: 0;
  }

  Breadcrumb::anchor:first-child {
    overflow: visible;
    margin-left: 4px;
  }
}