@st-namespace 'LikeButton-st-css';
@st-import [ --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ --wst-paragraph-2-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
@st-import [ setColor, setFont, createFontWithOverrides ] from '../../common/formatters.st';
@st-import IconToggle from '../IconToggle/IconToggle.st.css';

/*
 * The color of the icon border instead of the default color (checked state color cannot be changed)
 * @type color
 * @default --wix-color-5, when checked - #F64D43
 */
@property st-global(--wix-ui-tpa-like-button-icon-color);

/*
 * The color of the label instead of the default color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-like-button-label-color);

/*
 * The font of the label instead of the default font
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '12px', lineHeight: '16px'}
 */
@property st-global(--wix-ui-tpa-like-button-label-font);

.root {
  -st-states: checked;
  -st-extends: IconToggle;
  -st-mixin: setColor(--wix-ui-tpa-icon-toggle-icon-color, --wix-ui-tpa-like-button-icon-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))),
  setColor(--wix-ui-tpa-icon-toggle-label-color, --wix-ui-tpa-like-button-label-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))),
  createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "16px", "size": "12px" }'),
  setFont(--wix-ui-tpa-icon-toggle-label-font, (--wix-ui-tpa-like-button-label-font, --wst-paragraph-2-overriden-font), 'Body-M');
}

.root:checked {
  --default-checked-color: 246, 77, 67;
  -st-mixin: setColor(--wix-ui-tpa-icon-toggle-icon-color, --wix-ui-tpa-like-button-icon-color, var(--default-checked-color)),
  setColor(--wix-ui-tpa-icon-toggle-label-color, --wix-ui-tpa-like-button-label-color, var(--wix-color-5)),
  createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "16px", "size": "12px" }'),
  setFont(--wix-ui-tpa-icon-toggle-label-font, (--wix-ui-tpa-like-button-label-font, --wst-paragraph-2-overriden-font), 'Body-M');
}

.root::spacer,
.root:checked::spacer {
  width: 3px;
}


.likeButton {
  display: inline-block;
}

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