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

:vars {
  DefaultBackgroundColor: color(color-8);
  DefaultTextFont: "{theme: 'Body-M', size: '14px', lineHeight: '1.4'}";
  DefaultTextColor: color(color-1);
  DefaultBorderColor: color(color-8);
  DefaultBorderWidth: 0;
  DefaultBorderRadius: 0;
}

/* Overrides */
:vars {
  /*
    The background color of the Ribbon
    @default color-8
  */
  BackgroundColor: --overridable;
  /*
    The Ribbon's text font
    @default "{theme: 'Body-M', size: '14px', lineHeight: '1.4'}"
  */
  TextFont: --overridable;
  /*
    The Ribbon's text color
    @default color-1
  */
  TextColor: --overridable;
  /*
  The Ribbon's border color
  @default color-8
 */
  BorderColor: --overridable;
  /*
  The Ribbon's border width
  @default 0
 */
  BorderWidth: --overridable;
  /*
  The Ribbon's border radius
  @default 0
 */
  BorderRadius: --overridable;
}

/*
 * 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);

/* Overrides */
:vars {
  CurrentBackgroundColor: fallback(value(BackgroundColor), value(DefaultBackgroundColor));
  CurrentTextFont: fallback(font(value(TextFont)), font(value(DefaultTextFont)));
  CurrentTextColor: fallback(value(TextColor), value(DefaultTextColor));
  CurrentBorderColor: fallback(value(BorderColor), value(DefaultBorderColor));
  CurrentBorderWidth: fallback(value(BorderWidth), value(DefaultBorderWidth));
  CurrentBorderRadius: fallback(value(BorderRadius), value(DefaultBorderRadius));
}

.root {
  -st-states: square;

  background-color: value(CurrentBackgroundColor);
  font: value(CurrentTextFont);
  color: value(CurrentTextColor);
  display: inline-block;
  padding: 2px 8px;
  border-color: value(CurrentBorderColor);
  border-style: solid;
  border-width: value(CurrentBorderWidth);
  border-radius: value(CurrentBorderRadius);
}

.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.deprecated.st.css" */