.panel {
    padding-top: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
    padding-left: calc(var(--spacing) * 4);
    border-radius: var(--radius-box);
}

.panel-xs {
    padding-top: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 1);
    padding-left: calc(var(--spacing) * 1);

    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
}

.panel-sm {
    padding-top: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 2);

    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
}

.panel-wide-y {
    padding-top: calc(var(--spacing) * 16);
    padding-bottom: calc(var(--spacing) * 16);
}

.panel-wide-x {
    padding-left: calc(var(--spacing) * 16);
    padding-right: calc(var(--spacing) * 16);
}

.panel-neutral {
    background-color: var(--color-neutral-300);
    color: var(--color-neutral-content);
}

.panel-base-100 {
    background-color: var(--color-base-100);
    color: var(--color-base-content);
}

.panel-base-200 {
    background-color: var(--color-base-200);
    color: var(--color-base-content);
}

.panel-base-300 {
    background-color: var(--color-base-300);
    color: var(--color-base-content);
}

.panel-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
}

.panel-secondary {
    background-color: var(--color-secondary);
    color: var(--color-secondary-content);
}

.panel-info {
    background-color: var(--color-info);
    color: var(--color-info-content);
}

.panel-success {
    background-color: var(--color-success);
    color: var(--color-success-content);
}

.panel-warning {
    background-color: var(--color-warning);
    color: var(--color-warning-content);
}

.panel-error {
    background-color: var(--color-error);
    color: var(--color-error-content);
}

.panel-intro {
    background-color: var(--color-base-300);
    color: var(--color-base-content);
    font-style: italic;
}