@st-namespace 'Breadcrumbs-deprecated-st-css';
:import {
  -st-from: "../../common/formatters.st";
  -st-named: color, font, fallback;
}

:import {
  -st-from: "../TextButton/TextButton.deprecated.st.css";
  -st-default: TextButton;
}

/* Defaults - default params */
:vars {
  defaultFont: "{theme: 'Body-M', size: '16px', lineHeight: '1.5'}";
  defaultTextColor: color-5;
  defaultSeparatorColor: color-5;
}

/* Overrides - deceleration of overridable parameters by the consumer */
:vars {
  /*
    Main text font
    @default "{theme: 'Body-M', size: '16px', lineHeight: '1.5'}"
  */
  TextFont: --overridable;
  /*
  Main text color
   @default color-5
  */
  TextColor: --overridable;
  /*
  Separator icon color
  @default color-5
  */
  SeparatorColor: --overridable;
}
/*
 * 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);

/* Overrides */
:vars {
  textFont: fallback(font(value(TextFont)), font(value(defaultFont)));
  textColor: color(fallback(value(TextColor), value(defaultTextColor)));
  separatorColor: color(fallback(value(SeparatorColor), value(defaultSeparatorColor)));
}

.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;
  white-space: nowrap;
}

.button {
  -st-extends: TextButton;
  -st-mixin: TextButton(
          MainTextFont value(textFont),
          MainTextColor value(textColor)
  );
}

.noButtonCrumb {
  font: value(textFont);
  color: value(textColor);
}

.chevron {
  font: value(textFont);
  display: flex;
  margin: 0 4px;
  flex-shrink: 0;
  height: 1.5em;
  width: 1.5em;
}

.chevron {
  color: value(separatorColor);
}

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

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