:root {
    --prompt-item-height: 40px;
    --prompt-item-icon-width: var(--prompt-item-height);
    --prompt-item-close-width: var(--prompt-item-height);

    --prompt-item-background-color: var(--container-background-color);
    --prompt-item-outline-color: var(--container-outline-color);
    --prompt-item-shadow-color: var(--content-background-color);
    --prompt-item-hover-outline-color: var(--default-color);
    --prompt-item-hover-outline-width: var(--hover-border-width);

    --prompt-item-progress-color: var(--prompt-item-outline-color);

    --prompt-item-info-background-color: var(--prompt-item-background-color);
    --prompt-item-warning-background-color: var(--lucency-yellowish);
    --prompt-item-error-background-color: var(--lucency-reddish);
}

#prompt-container {
    margin-top: var(--margin);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%);
    justify-content: center;
    overflow: visible;
    display: grid;
    grid-template-columns: auto auto;
    user-select: none;
    z-index: 8;
}

.prompt-more {
    margin-left: var(--margin);
    grid-row: 1;
    grid-column: 2;
    display: none;
    pointer-events: none;
    font-size: small;
    white-space: pre-wrap;
}

.prompt-item {
    border-radius: var(--radius);
    backdrop-filter: var(--blur);
    background-color: var(--prompt-item-background-color);
    outline: var(--border-width) solid var(--prompt-item-outline-color);
    display: grid;
    grid-template-columns: var(--prompt-item-icon-width) auto var(
            --prompt-item-close-width
        );
    grid-row: 1;
    grid-column: 1;
    box-shadow: var(--shadow) var(--prompt-item-shadow-color);
}

.prompt-item:hover {
    outline: var(--prompt-item-hover-outline-width) solid
        var(--prompt-item-hover-outline-color);
}

.prompt-item-progress {
    border-radius: var(--radius);
    grid-row: 1;
    grid-column: 1/4;
    height: 100%;
    background-color: var(--prompt-item-progress-color);
    align-self: end;
    width: 0;
}

.prompt-item-icon {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--margin);
}

.prompt-item-content {
    text-align: center;
    grid-row: 1;
    grid-column: 2;
    line-height: var(--prompt-item-height);
}

.prompt-item-close {
    grid-row: 1;
    grid-column: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--margin);
    cursor: pointer;
}