/*
 * Shared component styles for Reach.Presentation.Components
 * Contains only global CSS classes that shared components depend on
 * but are not covered by scoped .razor.css files.
 */

/* ============================= */
/* Default CSS variable values   */
/* for shared components.        */
/* Hosts can override these.     */
/* ============================= */

:root {
    /* Toggle/Switch */
    --theme-toggle-border: hsl(106, 70%, 45%);
    --theme-toggle-bg: hsl(106, 70%, 45%);
    --theme-toggle-text: #ffffff;
    --theme-toggle-text-off: #919191;
    --theme-toggle-focus: #9ff799;
    --theme-toggle-off-border: #ebebeb;
    --theme-toggle-off-icon: #a1a1a1;
    --theme-toggle-off-bg: #ffffff;
    --theme-toggle-off-text: #424242;
    --theme-toggle-off-focus: #f3f4f6;

    /* Dropdown */
    --tw-dropdownlist-selection-color: hsl(221, 39%, 11%);
    --tw-input-clear-fg: hsl(0, 0%, 70%);

    /* Input disabled state */
    --theme-input-disabled-bg: hsla(0, 0%, 100%, 0.4);
    --theme-input-disabled-text: #000000;
    --theme-input-disabled-border: hsla(215, 16%, 47%, 0.4);
}

/* ============================= */
/* CSS reset for shared components */
/* Matches the Monolith CSS reset */
/* that components were designed for */
/* ============================= */

.tw_switch,
.tw_switch *,
.tw_input,
.tw_input * {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
}

.tw_switch svg,
.tw_input svg {
    display: block;
}

.tw_switch__toggle svg {
    fill: currentColor;
    border-radius: 50%;
}

/* ============================= */
/* Animation                     */
/* ============================= */

.tw_animation {
    transition: all 0.3s ease-in-out;
}

.tw_animation__rotate--0 { transform: rotate(0deg); }
.tw_animation__rotate--90 { transform: rotate(90deg); }
.tw_animation__rotate--180 { transform: rotate(180deg); }
.tw_animation__rotate--270 { transform: rotate(270deg); }
.tw_animation__rotate--minus-90 { transform: rotate(-90deg); }

.tw_animation__duration--100 { transition-duration: 100ms; }
.tw_animation__duration--200 { transition-duration: 200ms; }
.tw_animation__duration--300 { transition-duration: 300ms; }

/* ============================= */
/* Input validation outlines     */
/* ============================= */

.tw_input:has(.invalid) {
    outline: 1px solid var(--theme-input-invalid-border);
}

.tw_input:has(.invalid):focus-within {
    outline: 1px solid var(--theme-input-invalid-border);
    outline-offset: -2px;
}

/* ============================= */
/* Required indicator positioning */
/* ============================= */

.tw_input:has(textarea) .tw_input__required-indicator {
    position: absolute;
    bottom: 4px;
    inset-inline-end: 0.35rem;
    margin-inline-start: 0;
}

.tw_input:has(.tw_input-type__time) .tw_input__required-indicator {
    position: absolute;
    inset-inline-end: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    margin-inline-start: 0;
}

.hc-light-theme,
.hc-dark-theme {
    .tw_input:has(.invalid) {
        outline: 2px solid var(--hc-border);
    }

    .tw_input:has(.invalid):focus-within {
        outline: 2px solid var(--hc-border);
        outline-offset: -2px;
    }
}