@st-namespace 'Ribbon-st-css';
@st-import [ --wix-color-1, --wix-color-8 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, createFont, createFontWithOverrides ] from '../../common/formatters.st';
@st-import [ --wst-links-and-actions-color-rgb, --wst-primary-background-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

/*
 * The background color of the Ribbon
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-ribbon-background-color);

/*
 * The Ribbon's text font
 * @type font
 * @default "preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.4'}"
 */
@property st-global(--wix-ui-tpa-ribbon-text-font);

/*
 * The Ribbon's text color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-ribbon-text-color);

/*
 * The Ribbon's border color
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-ribbon-border-color);

/*
 * The Ribbon's border width
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-ribbon-border-width);

/*
 * The Ribbon's border radius
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-ribbon-border-radius);

.root {
  -st-states: square;

  background-color: createColor(--wix-ui-tpa-ribbon-background-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.4", "size": "14px" }'),
  createFont((--wix-ui-tpa-ribbon-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
  color: createColor(--wix-ui-tpa-ribbon-text-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  display: inline-block;
  padding: 2px 8px;
  border-color: createColor(--wix-ui-tpa-ribbon-border-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
  border-style: solid;
  border-width: var(--wix-ui-tpa-ribbon-border-width, 0);
  border-radius: var(--wix-ui-tpa-ribbon-border-radius, 0);
}

.root:square {
  width: 4em;
  height: 4em;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

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