@st-import [ setColor, setFont, setVar ] from "../../common/formatters.st";

.styled {
  --darkgrey: 169, 169, 169;
  --orange: 255, 165, 0;
  --blue: 0, 0, 255;
  -st-mixin: setColor(--wix-ui-tpa-tabs-main-text-color, null, var(--darkgrey)),
  setFont(--wix-ui-tpa-tabs-main-text-font, null, 'Body-M', '{ "size": "15px", "line-height": "1.5" }'),
  setColor(--wix-ui-tpa-tabs-selected-tab-indicator-color, null, var(--orange)),
  setColor(--wix-ui-tpa-tabs-indicator-color, null, var(--blue));
}

.tabBackground {
  --red: 255, 0, 0;
  -st-mixin:
    setColor(--wix-ui-tpa-tab-background-color, null, var(--red));
}


.tabBorderRadius {
  --border-radius: 10;
  --width: 5;
  --red: 255, 0, 0;

  -st-mixin:
    setVar(--wix-ui-tpa-tab-border-radius-start-start, --border-radius, px, 0),
    setVar(--wix-ui-tpa-tab-border-radius-start-end, --border-radius, px, 0),
    setVar(--wix-ui-tpa-tab-border-radius-end-start, --border-radius, px, 0),
    setVar(--wix-ui-tpa-tab-border-radius-end-end, --border-radius, px, 0),
    setColor(--wix-ui-tpa-tab-border-block-start-color, null, var(--red)),
    setColor(--wix-ui-tpa-tab-border-inline-start-color, null, var(--red)),
    setColor(--wix-ui-tpa-tab-border-inline-end-color, null, var(--red)),
    setColor(--wix-ui-tpa-tab-border-block-end-color, null, var(--red)),
    setVar(--wix-ui-tpa-tab-border-block-start-width, --width, px, 0),
    setVar(--wix-ui-tpa-tab-border-inline-start-width, --width, px, 0),
    setVar(--wix-ui-tpa-tab-border-inline-end-width, --width, px, 0),
    setVar(--wix-ui-tpa-tab-border-block-end-width, --width, px, 0);
}

.tabBorders {
  --red: 255, 0, 0;
  --green: 0, 255, 0;
  --blue: 0, 0, 255;
  --yellow: 255, 255, 102;

  --top-width: 5;
  --left-width: 10;
  --right-width: 15;
  --bottom-width: 20;

  -st-mixin:
    setColor(--wix-ui-tpa-tab-border-block-start-color, null, var(--red)),
    setVar(--wix-ui-tpa-tab-border-block-start-width, --top-width, px, 0),
    setColor(--wix-ui-tpa-tab-border-inline-start-color, null, var(--green)),
    setVar(--wix-ui-tpa-tab-border-inline-start-width, --left-width, px, 0),
    setColor(--wix-ui-tpa-tab-border-inline-end-color, null, var(--blue)),
    setVar(--wix-ui-tpa-tab-border-inline-end-width, --right-width, px, 0),
    setColor(--wix-ui-tpa-tab-border-block-end-color, null, var(--yellow)),
    setVar(--wix-ui-tpa-tab-border-block-end-width, --bottom-width, px, 0);
}

.tabNavBtn {
  --red: 255, 0, 0;
  -st-mixin:
    setColor(--wix-ui-tpa-tabs-arrows-color, null, var(--red));
}

.customTabContainer {
  --border-radius: 3;
  --blue: 0, 0, 255;

  -st-mixin:
    setColor(--wix-ui-tpa-tabs-background-color, null, var(--blue)),
    setVar(--wix-ui-tpa-tabs-border-radius-start-start, --border-radius, px, 0),
    setVar(--wix-ui-tpa-tabs-border-radius-start-end, --border-radius, px, 0),
    setVar(--wix-ui-tpa-tabs-border-radius-end-start, --border-radius, px, 0),
    setVar(--wix-ui-tpa-tabs-border-radius-end-end, --border-radius, px, 0);
}

.basicBorder {
  --border-width: 1;

  -st-mixin:
    setVar(--wix-ui-tpa-tabs-border-width-block-start, --border-width, px, 0),
    setVar(--wix-ui-tpa-tabs-border-width-inline-start, --border-width, px, 0),
    setVar(--wix-ui-tpa-tabs-border-width-inline-end, --border-width, px, 0),
    setVar(--wix-ui-tpa-tabs-border-width-block-end, --border-width, px, 0);
}

.colorfulBorder {
  --border-width: 2;
  --red: 255, 0, 0;
  --yellow: 255, 255, 0;
  --purple: 255, 0, 255;
  --green: 100, 255, 100;

  -st-mixin:
    setVar(--wix-ui-tpa-tabs-border-width-block-start, --border-width, px, 0),
    setVar(--wix-ui-tpa-tabs-border-width-inline-start, --border-width, px, 0),
    setVar(--wix-ui-tpa-tabs-border-width-inline-end, --border-width, px, 0),
    setVar(--wix-ui-tpa-tabs-border-width-block-end, --border-width, px, 0),
    setColor(--wix-ui-tpa-tabs-border-color-block-start, null, var(--red)),
    setColor(--wix-ui-tpa-tabs-border-color-inline-start, null, var(--yellow)),
    setColor(--wix-ui-tpa-tabs-border-color-inline-end, null, var(--purple)),
    setColor(--wix-ui-tpa-tabs-border-color-block-end, null, var(--green));

}

.paddingBorder {
  --border-width: 5;
  --red: 255, 0, 0;
  --gray: 200, 200, 200;
  --padding: 50;

  -st-mixin:
    setVar(--wix-ui-tpa-tabs-border-width-block-start, --border-width, px, 0),
    setVar(--wix-ui-tpa-tabs-border-width-inline-start, --border-width, px, 0),
    setVar(--wix-ui-tpa-tabs-border-width-inline-end, --border-width, px, 0),
    setVar(--wix-ui-tpa-tabs-border-width-block-end, --border-width, px, 0),
    setVar(--wix-ui-tpa-tabs-padding-block-start, --padding, px, 0),
    setVar(--wix-ui-tpa-tabs-padding-inline-start, --padding, px, 0),
    setVar(--wix-ui-tpa-tabs-padding-inline-end, --padding, px, 0),
    setVar(--wix-ui-tpa-tabs-padding-block-end, --padding, px, 0),
    setColor(--wix-ui-tpa-tabs-background-color, null, var(--gray)),
    setColor(--wix-ui-tpa-tabs-border-color-block-start, null, var(--red)),
    setColor(--wix-ui-tpa-tabs-border-color-inline-start, null, var(--red)),
    setColor(--wix-ui-tpa-tabs-border-color-inline-end, null, var(--red)),
    setColor(--wix-ui-tpa-tabs-border-color-block-end, null, var(--red));
}

.selectedIndicator {
  --primary: 66, 133, 244;
  --indicator-width: 3;
  --indicator-radius: 0;

  -st-mixin:
    setColor(--wix-ui-tpa-tab-selected-indicator-color, null, var(--primary)),
    setVar(--wix-ui-tpa-tab-selected-border-block-end-width, --indicator-width, px, 0),
    setVar(--wix-ui-tpa-tab-selected-border-radius, --indicator-radius, px, 0);
}

.selectedIndicatorWithBackground {
  --light-blue: 232, 240, 254;

  -st-mixin:
    setColor(--wix-ui-tpa-tab-selected-background-color, null, var(--light-blue));
}

.selectedIndicatorWithText {
  --dark-blue: 25, 103, 210;

  -st-mixin:
    setColor(--wix-ui-tpa-tab-selected-text-color, null, var(--dark-blue)),
    setFont(--wix-ui-tpa-tab-selected-text-font, null, 'Body-M', '{ "size": "20px", "line-height": "1.5", "weight": "bold" }');
}

.selectedIndicatorWithBorders {
  --primary: 66, 133, 244;
  --accent: 52, 168, 83;
  --indicator-width: 3;
  --border-radius: 4;

  -st-mixin:
    setColor(--wix-ui-tpa-tab-selected-indicator-color, null, var(--primary)),
    setColor(--wix-ui-tpa-tab-selected-border-block-start-color, null, var(--accent)),
    setColor(--wix-ui-tpa-tab-selected-border-inline-end-color, null, var(--accent)),
    setColor(--wix-ui-tpa-tab-selected-border-inline-start-color, null, var(--accent)),
    setVar(--wix-ui-tpa-tab-selected-border-block-end-width, --indicator-width, px, 0),
    setVar(--wix-ui-tpa-tab-selected-border-block-start-width, --indicator-width, px, 0),
    setVar(--wix-ui-tpa-tab-selected-border-inline-end-width, --indicator-width, px, 0),
    setVar(--wix-ui-tpa-tab-selected-border-inline-start-width, --indicator-width, px, 0),
    setVar(--wix-ui-tpa-tab-selected-border-radius, --border-radius, px, 0);
}

.selectedIndicatorWithRadius {
  --primary: 66, 133, 244;
  --light-blue: 232, 240, 254;
  --indicator-width: 3;
  --border-radius: 8;

  -st-mixin:
    setColor(--wix-ui-tpa-tab-selected-indicator-color, null, var(--primary)),
    setColor(--wix-ui-tpa-tab-selected-background-color, null, var(--light-blue)),
    setVar(--wix-ui-tpa-tab-selected-border-block-end-width, --indicator-width, px, 0),
    setVar(--wix-ui-tpa-tab-selected-border-radius-start-start, --border-radius, px, 0),
    setVar(--wix-ui-tpa-tab-selected-border-radius-start-end, --border-radius, px, 0),
    setVar(--wix-ui-tpa-tab-selected-border-radius-end-start, --border-radius, px, 0),
    setVar(--wix-ui-tpa-tab-selected-border-radius-end-end, --border-radius, px, 0);
}

.gaps {
  --row-gap: 30;
  --column-gap: 40;

  -st-mixin: setVar(--wix-ui-tpa-tabs-wrap-row-gap, --row-gap, px, 0),
    setVar(--wix-ui-tpa-tabs-space-between-items, --column-gap, px, 0);
}

.bigDefaultFont {
  -st-mixin:
    setFont(--wix-ui-tpa-tabs-main-text-font, null, 'Body-M', '{ "size": "50px", "line-height": "50px", "weight": "bold" }'),
    setFont(--wix-ui-tpa-tab-selected-text-font, null, 'Body-M', '{ "size": "20px", "line-height": "20px", "weight": "bold" }');
}

.bigSelectedFont {
  -st-mixin:
    setFont(--wix-ui-tpa-tab-selected-text-font, null, 'Body-M', '{ "size": "50px", "line-height": "50px", "weight": "bold" }');
}

.wstUnderline {
  -st-mixin: setVar(--wix-ui-tpa-tab-border-block-end-width, null, px, 10),
  setVar(--wst-system-line-1-color-rgb, null, null, "255, 170, 0");
}

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