@st-namespace 'IconToggle-st-css';
@st-import [ --wix-color-5, --wix-color-29 ] 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 [ createColor, createFont, createFontWithOverrides ] from '../../common/formatters.st';
:import {
    -st-from: "../../common/palette.st.css";
    -st-named: focusRing;
}
/*
 * The color of the icon
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-icon-toggle-icon-color);

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

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

.root {
    -st-states:
        checked,
        disabled,
        labelPlacement(enum(start, end)),
        animation;

    display: inline-block;
    padding: 0;
    margin: 0;
    line-height: 0;
}

:global(#SITE_CONTAINER.focus-ring-active) .root:focus-within {
  -st-mixin: focusRing();
}

.content {
    display: flex;
    align-items: center;
}

.root:labelPlacement(start) .content {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.root:labelPlacement(end) .content {
    flex-direction: row;
    justify-content: flex-start;
}

.spacer {
    width: 6px;
}

.root:hover .icon {
    opacity: 0.6;
    transition: opacity 0.2s cubic-bezier(.39, .11, .37, .99);
}

.root:hover .label {
    opacity: 0.6;
    transition: opacity 0.2s cubic-bezier(.39, .11, .37, .99);
}

.root:disabled:hover .icon {
    opacity: 1;
}

.root:disabled:hover .label {
    opacity: 1;
}

.icon svg {
    display: block;
}

.icon svg:not([fill="currentColor"]) path {
    stroke: createColor(--wix-ui-tpa-icon-toggle-icon-color, var(--wix-color-5));
}

.root:checked .icon svg:not([fill="currentColor"]) path {
    fill: createColor(--wix-ui-tpa-icon-toggle-icon-color, var(--wix-color-5));
}

.root:disabled .icon svg:not([fill="currentColor"]) path {
    fill: rgb(var(--wix-color-29));
    stroke: rgb(var(--wix-color-29));
}

.label {
    color: createColor(--wix-ui-tpa-icon-toggle-label-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "16px", "size": "12px" }'),
    createFont((--wix-ui-tpa-icon-toggle-label-font, --wst-paragraph-2-overriden-font), 'Body-M');
    font-size: 12px;
}

.root:disabled .label {
    color: rgb(var(--wix-color-29));
}

@keyframes pop-in {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    50% {
        transform: scale(1.03);
        opacity: 0.32;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.root:animation:checked .icon {
    animation: pop-in 0.2s ease 0s 1 normal;
    animation-fill-mode: forwards;
}

/* -------------- new icons ---------------- */

.icon svg[fill="currentColor"] {
    color: createColor(--wix-ui-tpa-icon-toggle-icon-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.root:disabled .icon svg[fill="currentColor"] {
    color: rgb(var(--wix-color-29));
}

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