@st-namespace 'WeeklyDateNavigation-st-css';
@st-import [ --wix-color-1, --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, createFont, setColor, setFont, createFontWithOverrides ] from '../../common/formatters.st';
@st-import Text from '../Text/Text.st.css';
@st-import IconButton from '../IconButton/IconButton.st.css';
@st-import [ --wst-primary-background-color-rgb, --wst-paragraph-2-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

/*
 * Background color
 * @type color
 */
@property st-global(--wix-ui-tpa-weekly-date-navigation-background-color);
/*
 * Navigation arrows color
 * @type color
 */
@property st-global(--wix-ui-tpa-weekly-date-navigation-navigation-arrows-color);
/*
 * Month and year caption color
 * @type color
 */
@property st-global(--wix-ui-tpa-weekly-date-navigation-month-and-year-caption-color);
/*
 * Month and year caption font
 * @type font
 */
@property st-global(--wix-ui-tpa-weekly-date-navigation-month-and-year-caption-font);


.root {
  -st-states: rtl;
  background-color: createColor(--wix-ui-tpa-weekly-date-navigation-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.5", "size": "16px" }'),
  createFont((--wix-ui-tpa-weekly-date-navigation-month-and-year-caption-font, --wst-paragraph-2-overriden-font), 'Body-M');
  display: flex;
  justify-content: space-between;
  min-width: 240px;
}

.text {
  -st-extends: Text;
  -st-mixin: setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-weekly-date-navigation-month-and-year-caption-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))),
  createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.5", "size": "16px" }'),
  setFont(--wix-ui-tpa-text-main-text-font, (--wix-ui-tpa-weekly-date-navigation-month-and-year-caption-font, --wst-paragraph-2-overriden-font), 'Body-M');
  margin: 0 20px;
}

.arrow {
  -st-extends: IconButton;
  -st-mixin:
    setColor(--wix-ui-tpa-icon-button-icon-color, --wix-ui-tpa-weekly-date-navigation-navigation-arrows-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  font-size: inherit;
}

:global([dir='rtl']) .arrow,
.root:rtl .arrow {
  transform: rotate(180deg);
}

.arrow::icon svg {
  width: 24px;
  height: 24px;
}

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