.recorder {
    align-items: center;
    padding: 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    background: transparent;
    display: flex;
    margin: auto;
    outline: transparent;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    color: var(--gray1);
    font: 1em/1.5 sans-serif;
    font-size: 20px;
    font-weight: bold;
    transition:
        background-color var(--trans-dur),
        color var(--trans-dur);
}

.recorder__switch {
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: start;
    border: 1px solid rgba(255, 255, 255, 0.3);
    .recorder__switch-handle {
        position: relative;
    }
}

.recorder__timer {
    transform: rotate(-90deg);
}
.recorder__label-end-text {
    display: block;
}
.recorder__label-start,
.recorder__label-end {
    font-size: 20px;
    font-weight: 900;
}

:root {
    --hue: 223;
    --red: hsl(3, 90%, 50%);
    --white: hsl(0, 0%, 100%);
    --primary: hsl(var(--hue), 90%, 50%);
    --primary-t: hsla(var(--hue), 90%, 50%, 0);
    --gray1: hsl(var(--hue), 10%, 90%);
    --gray2: hsl(var(--hue), 10%, 80%);
    --gray3: hsl(var(--hue), 10%, 70%);
    --gray4: hsl(var(--hue), 10%, 60%);
    --gray5: hsl(var(--hue), 10%, 50%);
    --gray6: hsl(var(--hue), 10%, 40%);
    --gray7: hsl(var(--hue), 10%, 30%);
    --gray8: hsl(var(--hue), 10%, 20%);
    --gray9: hsl(var(--hue), 10%, 10%);
    --trans-dur: 0.3s;
    --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
}

.recorder__label-start,
.recorder__label-end {
    display: block;
    position: relative;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.recorder__label-start,
.recorder__label-end-text {
    transition: opacity var(--trans-dur);
}
.recorder__label-start {
    margin-inline: 0 0.5em;
}
.recorder__label-end {
    margin-inline: 0.5em 0;
}
.recorder__label-end-text {
    opacity: 0.6;
}
.recorder__label-end-text + .recorder__label-end-text {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}
[dir='rtl'] .recorder__label-end-text + .recorder__label-end-text {
    right: 0;
    left: auto;
}
.recorder__switch {
    background-color: var(--gray8);
    box-shadow:
        0 0 0 0.125em var(--primary-t),
        0 0.25em 0.25em rgba(0, 0, 0, 0.2);
    border-radius: 0.75em;
    display: flex;
    padding: 0.25em;
    width: 2.5em;
    height: 1.5em;
}
.recorder__switch,
.recorder__switch-handle {
    transition:
        background-color var(--trans-dur),
        box-shadow var(--trans-dur),
        transform var(--trans-dur) var(--trans-timing),
        transform-origin var(--trans-dur) var(--trans-timing);
}
.recorder__switch-handle {
    background-color: var(--gray6);
    border-radius: 50%;
    display: block;
    transform-origin: 0 0.5em;
    width: 1em;
    height: 1em;
}
[dir='rtl'] .recorder__switch-handle {
    transform-origin: 100% 0.5em;
}
.recorder__timer {
    display: block;
    overflow: visible;
    width: 100%;
    height: auto;
}
.recorder__timer-ring {
    transition:
        r var(--trans-dur) var(--trans-timing),
        stroke-dasharray var(--trans-dur) var(--trans-timing),
        stroke-dashoffset var(--trans-dur) var(--trans-timing),
        stroke-width var(--trans-dur) var(--trans-timing);
}
.recorder:focus-visible .recorder__switch {
    box-shadow:
        0 0 0 0.125em var(--primary),
        0 0.25em 0.25em rgba(0, 0, 0, 0.2);
}
.recorder[aria-pressed='true'] .recorder__label-start {
    opacity: 0.4;
}
.recorder[aria-pressed='true'] .recorder__label-end-text {
    opacity: 0;
}
.recorder[aria-pressed='true'] .recorder__label-end-text + .recorder__label-end-text {
    opacity: 1;
}
.recorder[aria-pressed='true'] .recorder__switch-handle {
    background-color: var(--red);
    transform: translateX(100%);
    transform-origin: 100% 0.5em;
}
[dir='rtl'] .recorder[aria-pressed='true'] .recorder__switch-handle {
    transform: translateX(-100%);
    transform-origin: 0 0.5em;
}
.recorder[aria-pressed='true'] .recorder__timer-ring {
    r: 6.5px;
    stroke-width: 3px;
}
#video-recorder {
    width: 100%;
    height: auto;
    background: #000;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
    aspect-ratio: 4 / 3;
    .inner {
        background: transparent;
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        z-index: 10;
    }
    #live-recording-video,
    #review-playback-video,
    #course-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: #000;
        aspect-ratio: 4 / 3;
    }
    #course-video {
        opacity: 0.5;
        transition: opacity 200ms ease-out;
    }
    #live-recording-video-wrapper {
        width: 100%;
        background: #000;
        border-radius: 10px;
        outline: 5px solid #fff;
        position: absolute;
        top: 1rem;
        right: 1rem;
        transform: scale(0);
        will-change: transform, left, top;
        transform-origin: right top;
        opacity: 0;
        transition:
            opacity 200ms ease-out,
            transform 200ms ease-out,
            top 200ms ease-out,
            right 200ms ease-out,
            outline 200ms ease-out;
        aspect-ratio: 4 / 3;
        video {
            border-radius: 10px;
            display: block;
            transform: scaleX(-1);
            opacity: 0;
            transition: opacity 300ms ease-out;
        }
    }

    #review-playback-video {
        position: absolute;
        top: 0;
        right: 0;
        opacity: 0;
        transition: opacity 300ms ease-out;
    }
    &.recording {
        #live-recording-video-wrapper {
            opacity: 1;
            transform: scale(0.3);
            z-index: 8;
            video {
                opacity: 1;
            }
        }
    }
    &.reviewing {
        #live-recording-video-wrapper {
            opacity: 1;
            transform: scale(1);
            top: 0;
            right: 0;
            outline: 6px solid transparent;
            height: auto;
            video {
                opacity: 0;
            }
        }
        #review-playback-video {
            transition-delay: 300ms;
            opacity: 1;
            border-radius: 0;
            outline: none;
            width: 100%;
            height: 100%;
            z-index: 9;
        }
    }
}

.submit-recording-wrapper {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;

    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;

    transition:
        200ms ease-in-out transform,
        200ms ease-in-out opacity;
    transform: translate3d(0, 0, 0);

    border: 1px solid rgb(123, 237, 186);
    border-left: 12px solid rgb(123, 237, 186);
    padding: 1em 1.5em;
    background: rgb(220, 245, 235);
    opacity: 0;
    transform: translate3d(0, 1rem, 0);

    svg.uploading,
    svg.ok,
    svg.error {
        display: none;
    }

    [data-action='submit recording'] {
        white-space: nowrap;
        background: #000;
        color: #fff;
        font-weight: 900;
        padding: 1em 1.5em 1.2em;
        font-variant: small-caps;
        text-transform: uppercase;
        line-height: 0;
        font-size: 16px;
        transition:
            200ms ease-in-out transform,
            200ms ease-in-out opacity;
        transform: translate3d(0, 1rem, 0);
        opacity: 0;
        border-radius: 2em;
        border: none;
        cursor: pointer;
        transition-delay: 200ms;
        svg {
            margin: 0 0 0 0.5em;
        }
        &.uploading {
            cursor: wait;
            svg.uploading {
                display: inline;
                animation-name: spin;
                animation-duration: 1s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
            }
            svg.upload,
            svg.ok,
            svg.error {
                display: none;
            }
        }
        &.ok {
            svg.ok {
                display: inline;
            }
            svg.upload,
            svg.uploading,
            svg.error {
                display: none;
            }
        }
        &.error {
            svg.error {
                display: inline;
            }
            svg.upload,
            svg.uploading,
            svg.ok {
                display: none;
            }
        }
    }

    &:has(button:disabled) {
        cursor: not-allowed;
    }
    &:has(button.uploading) {
        cursor: wait;
    }

    &.show {
        opacity: 1;
        transform: translate3d(0, 0, 0);

        [data-action='submit recording'] {
            opacity: 1;
            transform: translate3d(0, 0, 0);

            &:active {
                transition-duration: 0ms;
                transition-delay: 0ms;
                transform: translate3d(0, 0, 0) scale(0.98);
            }
        }
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.instructions {
    font-size: 80%;
    width: 100%;
    .error {
        display: none;
        background-color: rgb(255, 229, 229);
        border: 1px solid rgba(181, 10, 55, 1);
        padding: 1em 1.5em;
        border-radius: 0;
        margin: 1rem 0 0;
        border-left: 12px solid rgba(181, 10, 55, 1);
        strong {
            font-weight: 900;
        }
    }
}

#video-recorder.error + .instructions {
    .error {
        display: block;
    }
}