@st-namespace 'Breadcrumbs-st-css';
@st-import [ --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createFont, createColor, setFont, setColor, createFontWithOverrides, setVar ] from '../../common/formatters.st';
@st-import TextButton from '../TextButton/TextButton.st.css';
@st-import [ --wst-links-and-actions-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
/*
 * Main text font
 * @type font
 * @default "preset: 'Body-M' | overrides: { size: '16px', lineHeight: '1.5'}"
 */
@property st-global(--wix-ui-tpa-breadcrumbs-text-font);
/*
 * Main text color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-breadcrumbs-text-color);
/*
 * Separator icon color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-breadcrumbs-separator-color);

/*
 * Breadcrumbs hover opacity
 * @type size
 * @default 70%
 */
@property st-global(--wix-ui-tpa-breadcrumbs-hover-opacity);

.root {
  align-items: center;
  -st-states: rtl;
  max-width: 100%;
}

.list {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.crumb {
  display: flex;
  align-items: center;
  margin: 4px 0 4px 0;
  list-style-type: none;
  word-break: break-word;
}

.button{
  -st-extends: TextButton;
}
.root .button {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.5", "size": "16px" }'),
  setFont(--wix-ui-tpa-text-button-main-text-font, (--wix-ui-tpa-breadcrumbs-text-font, --wst-paragraph-2-overriden-font), 'Body-M'),
  setColor(--wix-ui-tpa-text-button-main-text-color, --wix-ui-tpa-breadcrumbs-text-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-5)));
}

.button:priority(secondary):active:not(:hoverStyle(underline)),
.button:priority(secondary):focus:not(:hoverStyle(underline)),
.button:priority(secondary):hover:not(:hoverStyle(underline)) {
  color: createColor(
    --wix-ui-tpa-text-button-main-text-color,
    var(--wst-links-and-actions-color-rgb, var(--wix-color-5)),
    var(--wix-ui-tpa-breadcrumbs-hover-opacity, 0.7)
  );
}

.noButtonCrumb {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.5", "size": "16px" }'),
  createFont((--wix-ui-tpa-breadcrumbs-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
  color: createColor(--wix-ui-tpa-breadcrumbs-text-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-5)));
}

.chevron {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.5", "size": "16px" }'),
  createFont((--wix-ui-tpa-breadcrumbs-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
  display: flex;
  margin: 0 4px;
  flex-shrink: 0;
  height: 1.5em;
  width: 1.5em;
}

.chevron {
  color: createColor(--wix-ui-tpa-breadcrumbs-separator-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-5)));
}

.root:rtl .chevron {
  transform: scaleX(-1);
}

/* st-namespace-reference="../../../../src/components/Breadcrumbs/Breadcrumbs.st.css" */