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

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

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

/* Defaults - default params */
:vars {
    defaultBackgroundColor: color-1;
    defaultNavigationArrowsColor: color-5;
    defaultMonthAndYearCaptionColor: color-5;
    defaultMonthAndYearCaptionFont: "{theme: 'Body-M', size: '16px', lineHeight: '1.5'}";
}

/* Overrides - deceleration of overridable parameters by the consumer */
:vars {
    /*
    Background color
    */
    BackgroundColor: --overridable;

    /*
    Navigation arrows color
    */
    NavigationArrowsColor: --overridable;

    /*
    Month and year caption color
    */
    MonthAndYearCaptionColor: --overridable;

    /*
    Month and year caption font
    */
    MonthAndYearCaptionFont: --overridable;
}
/*
 * 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);

/* Overrides */
:vars {
    backgroundColor: color(fallback(value(BackgroundColor), value(defaultBackgroundColor)));
    navigationArrowsColor: color(fallback(value(NavigationArrowsColor), value(defaultNavigationArrowsColor)));
    monthAndYearCaptionColor: color(fallback(value(MonthAndYearCaptionColor), value(defaultMonthAndYearCaptionColor)));
    monthAndYearCaptionFont: fallback(font(value(MonthAndYearCaptionFont)), font(value(defaultMonthAndYearCaptionFont)));
}

.root {
    -st-states: rtl;
    background-color: value(backgroundColor);
    font: value(monthAndYearCaptionFont);
    display: flex;
    justify-content: space-between;
    min-width: 240px;
}

.text {
    -st-extends: Text;
    -st-mixin: Text(
      MainTextColor value(monthAndYearCaptionColor),
      MainTextFont value(monthAndYearCaptionFont)
    );
    margin: 0 20px;
}

.arrow {
    -st-extends: IconButton;
    -st-mixin: IconButton(
      IconColor value(navigationArrowsColor)
    );
    font-size: inherit;
}

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

.arrow::icon svg {
    width: 1.5em;
    height: 1.5em;
}

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