.bbr-modal {
    &.modal {
        z-index: 1000;

        .modal-card {
            max-height: calc(100vh - 40px);
            width: auto;
            height: auto;
            min-width: 300px;
            max-width: calc(100vw - 40px);
            transition: min-width 0.25s ease, max-width 0.25s ease, min-height 0.25s ease, max-height 0.25s ease;
        }

        .modal-card-head {
            border-bottom: 1px solid #dbdbdb;
            gap: 0.5rem;
        }

        .modal-card-foot {
            border-top: 1px solid #dbdbdb;
            justify-content: flex-end;
            gap: 0.5rem;
        }

        .modal-card-body {
            overflow-y: auto;
        }

        // Size modifiers
        &.is-small .modal-card {
            min-width: 250px;
            max-width: 400px;
        }

        &.is-medium .modal-card {
            min-width: 400px;
            max-width: 640px;
        }

        &.is-large .modal-card {
            min-width: 600px;
            max-width: 960px;
        }

        // Maximized state
        &.bbr-modal--maximized .modal-card {
            min-width: 95vw;
            max-width: 95vw;
            max-height: 95vh;
            min-height: 95vh;
        }
    }

    &__maximize {
        flex-shrink: 0;
        cursor: pointer;
        opacity: 0.55;
        transition: opacity 0.15s ease;

        &:hover {
            opacity: 1;
        }
    }

    &__header-controls {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        margin-left: auto;
        flex-shrink: 0;
    }
}