@import url('./styles/root.css');

body {
    overflow: hidden;
}

.wrapper {
    min-width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;

    display: flex;
    flex-direction: column
}

header {
    padding-inline: calc(var(--spacing)* 4);
    padding-block: calc(var(--spacing)* 2);
    border-block-end: 1px solid var(--color-gray-200);

    display: flex;
    justify-content: space-between;
    align-items: center;

    flex-grow: 0;
    flex-shrink: 0;
}

.container {
    max-width: 100%;
    flex-grow: 1;
    display: flex;
}

main {
    flex-grow: 1;
    padding: calc(var(--spacing)* 4);
}
.container aside {
    border-inline-start: 1px solid var(--color-gray-200);
    width: calc(var(--spacing)* 70);
    flex-grow: 0;
    flex-shrink: 0;
    padding: calc(var(--spacing)* 4);
}

label.auth input[type="text"] {
    margin-inline-start: calc(var(--spacing)* 2);
    width: calc(var(--spacing)* 125);
    text-align: right;
}

label.auth input[type="text"] {
    margin-inline-start: calc(var(--spacing)* 2);
    width: calc(var(--spacing)* 125);
    text-align: right;
}

input[type="text"] {
    border: 1px solid var(--color-gray-200);
}
textarea {
    border: 1px solid var(--color-gray-200);
}

input[type="text"].error {
    border-color: var(--color-red-400);
}

h1 {
    color: var(--color-gray-900);
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
}

.notifier {
    position: absolute;
    left: calc(var(--spacing)* 4);
    top: calc(100vh - calc(var(--spacing)* 4));
    transform: translateY(-100%);
    pointer-events: none;
    max-width: var(--container-sm);
    width: 100%;
}

.notifier>.notification:not(:last-child) {
    margin-bottom: calc(var(--spacing)* 4);
}

.notification {
    position: relative;
    padding: calc(var(--spacing)* 4);
    display: flex;
    align-items: flex-start;

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);

    --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    --tw-shadow-color: rgb(0 0 0 / 0.1);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    pointer-events: auto;
}

.progress {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--spacing);
    background-color: var(--color-gray-200);
}

.progress>div {
    width: attr(data-progress);
    height: 100%;
    background-color: var(--color-indigo-400);
}

.icon {
    flex-shrink: 0;
}

.icon>svg {
    width: calc(var(--spacing)* 6);
    height: calc(var(--spacing)* 6);

    display: block;
}

.notification.enqueued .icon>svg {
    color: var(--color-gray-400);
}

.notification.uploading .icon>svg {
    color: var(--color-indigo-400);
}

.notification.uploaded .icon>svg {
    color: var(--color-green-400);
}

.notification.failed .icon>svg {
    color: var(--color-red-400);
}

.content {
    flex: 1;
    padding-top: calc(var(--spacing)* 0.5);
    width: calc(var(--spacing)* 0);
    margin-left: calc(var(--spacing)* 3);
}

.text {
    color: var(--color-gray-900);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.description {
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    margin-top: calc(var(--spacing)* 1);
}

.action {
    flex-shrink: 0;
    display: flex;
    margin-left: calc(var(--spacing)* 4);
}

.button-icon {
    color: var(--color-gray-400);
    border-radius: var(--radius-md);
    display: inline-flex;

    &:hover {
        @media (hover: hover) {
            color: var(--color-gray-500);
        }
    }

    &:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-shadow:
            /*var(--tw-ring-inset)*/
            0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-color: var(--color-indigo-500);
        --tw-ring-shadow:
            /*var(--tw-ring-inset)*/
            0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
}

.icon-close {
    width: calc(var(--spacing)* 5);
    height: calc(var(--spacing)* 5);
}