/* Define variables */
:root {
    --var-font-family: 'Inter Tight', sans-serif;
    /* --var-font-family: 'Inter', sans-serif; */
    /* --var-font-family: 'Source Sans 3', sans-serif; */
    --var-font-weight: 400;
    --var-font-style: normal;
    /* shorts color palette */
    --shorts-50:  #E4E5E8;
    --shorts-100: #DADADA;
    --shorts-200: #8B8B8B;
    --shorts-300: #4F5053;
    --shorts-400: #44464B;
    --shorts-500: #34363D;
    --shorts-600: #24272F;
    --shorts-700: #1F2026;
    --shorts-800: #17181A;
    --shorts-900: #101011;
}

/* Basic body styling */
body {
    font-family: var(--var-font-family);
    font-weight: var(--var-font-weight);
    font-style: var(--var-font-style);

    background-color: #1c1d1c;
    /* color: #b1b1b1; */
    color: var(--shorts-200);

    font-weight: 400;
    /* letter-spacing: -0.008em; */
}

/* Buttons */
button {
    font-family: var(--var-font-family);
    font-weight: var(--var-font-weight);
    font-style: var(--var-font-style);

    color: #b1b1b1;
    /* background-color: #1d1d1d; */
    border: 1px solid #2e2e2e;

    &:hover {
        background-color: #2a2a2a;
    }

    &:active {
        background-color: #161616;
        color: #2d8ceb
    }
}

/* Inputs */
input {
    font-family: var(--var-font-family);
    font-weight: var(--var-font-weight);
    font-style: var(--var-font-style);

    color: #b1b1b1;
    background-color: #161616;
    border: 1px solid #2e2e2e;

    &:focus {
        background-color: white;
        color: black;
        border: 1px solid #2d8ceb;
    }
}

textarea {
    font-family: var(--var-font-family);
    font-weight: var(--var-font-weight);
    font-style: var(--var-font-style);

    color: #b1b1b1;
    background-color: #161616;
    border: 1px solid #2e2e2e;

    &:focus {
        background-color: white;
        color: black;
        border: 1px solid #2d8ceb;
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
label,
button,
p {
    user-select: none;
}

input[type="radio"],
input[type="checkbox"],
input[type="range"],
label {
    cursor: pointer;
}

em-emoji-picker {
    height: 300px;
}

/* EXTRA CSS REPLACE WITH TAILWIND WHERE POSSIBLE */

#zooms-transcript-wrap.rtl {
    direction: rtl;
    unicode-bidi: bidi-override;
}

#zooms-transcript-text-overlay {
    grid-template-columns: [timestamps] 50px [texts] 1fr;
}

#zooms-transcript-text {
    grid-template-columns: [timestamps] 50px [texts] 1fr;
}

#zooms-transcript-text.rtl {
    direction: rtl;
    unicode-bidi: bidi-override;
}

#zooms-transcript-text.unselectable div::selection {
    background-color: transparent;
}

.zooms-transcript-line-overlay.rtl {
    direction: rtl;
    unicode-bidi: bidi-override;
}

.zooms-transcript-line.rtl {
    direction: rtl;
    unicode-bidi: bidi-override;
}

.zooms-transcript-timestamp.rtl {
    direction: rtl;
    unicode-bidi: bidi-override;
    padding-right: 0;
    padding-left: 1rem;
}

.zooms-handle-left-hitbox.rtl {
    margin-left: 0;
    margin-right: -6px;
}

.zooms-handle-right-hitbox.rtl {
    margin-left: 0;
    margin-right: -6px;
}

.zooms-handle-moving {
    pointer-events: none;
    cursor: col-resize;
}

.driver-popover.driverjs-theme {
    background-color: var(--shorts-500) !important;
    color: white;
    border-radius: 0.5rem;
    border: 1px solid var(--shorts-600);
    position: fixed !important;
}

.driver-popover.driverjs-theme .driver-popover-description {
    color: white;
    font-size: 14px;
    line-height: 1.5;
}

.driver-popover.driverjs-theme .driver-popover-description strong {
    font-weight: 700;
    color: white;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom {
    border-bottom-color: var(--shorts-500) !important; /* Match arrow color to popover background */
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-top {
    border-top-color: var(--shorts-500) !important; /* Match arrow color to popover background */
}

.driver-popover.driverjs-theme button {
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.25rem;
    border-width: 1px;
    border-color: #7C3AED;
    background-color: #7C3AED;
    cursor: pointer;
    user-select: none;
    color: white;
    text-shadow: none;
}

.driver-popover.driverjs-theme button:hover {
    border-color: #8B5CF6;
    background-color: #8B5CF6;
}

.driver-popover.driverjs-theme .driver-popover-close-btn {
    width: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

