.overlay-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.overlay {
    display: flex;
    flex-direction: column;
    max-height: 75dvh;
    max-width: 700px;
    min-width: 300px;
    overflow: hidden;
    width: 98dvw;

    .overlay-header,
    .overlay-content,
    .overlay-footer {
        display: flex;
        flex-direction: column;
    }

    .overlay-header {
        border-bottom: 1px solid var(--border-color);
    }

    .overlay-content-wrapper {
        overflow: hidden;
        position: relative;
    }

    .overlay-content {
        padding: var(--spacing-lg);
        overflow: auto;
        height: 100%;
    }

    .overlay-footer {
        flex-direction: row;
        justify-content: end;
        gap: var(--spacing-lg);

        border-top: 1px solid var(--border-color);
    }

    .more-hint {
        bottom: var(--spacing-sm);
        color: var(--primary);
        position: absolute;
        right: var(--spacing-sm);
    }
}