/* Button Modal View Styles */

button-modal-view {
    --ok-color: var(--color-primary);
    --warn-color: var(--color-warning-accent);
    --error-color: var(--color-warning-strong);
}

button-modal-view .btn-option {
    color: white;
}

button-modal-view .btn-ok {
    background: var(--ok-color);
}

button-modal-view .btn-ok:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-primary-alpha-40);
}

button-modal-view .btn-warn {
    background: var(--warn-color);
}

button-modal-view .btn-warn:hover {
    background: var(--color-warning-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-warning-accent-rgba-40);
}

button-modal-view .btn-error {
    background: var(--error-color);
}

button-modal-view .btn-error:hover {
    background: var(--color-danger-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-warning-rgba-40);
}

button-modal-view .modal-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
}

button-modal-view .modal-header {
    padding-left: 0;
    padding-top: 0;
    padding-right: 0;
}

button-modal-view .modal-footer {
    padding-bottom: 0;
}

button-modal-view .modal-body {
    display: none;
}

button-modal-view .modal-content {
    background: var(--modal-bg);
    border: var(--border-width-default) solid var(--modal-border);
    border-radius: var(--radius-rem-xl);
    box-shadow: var(--modal-shadow);
    padding: var(--space-rem-8);
    max-width: calc(100% - 2rem);
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease-out;
    box-sizing: border-box;
    margin: var(--space-rem-7);
    width: fit-content;
}