.rollover-dashboard-widget { outline: none; }

.rollover-dashboard-card {
    position: relative;
    height: 148px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
}

.rollover-dashboard-summary,
.rollover-dashboard-details {
    position: absolute;
    inset: 0;
    transition: transform 1100ms cubic-bezier(.22, .61, .36, 1);
}

.rollover-dashboard-summary {
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rollover-dashboard-main-content {
    display: flex;
    flex-direction: column;
}

.rollover-dashboard-total {
    color: var(--mud-palette-primary);
    font-size: 54px;
    line-height: .95;
    font-weight: 700;
    margin-bottom: 13px;
}

.rollover-dashboard-label { font-size: 16px; font-weight: 600; }

.rollover-dashboard-indicator {
    position: absolute;
    right: 18px;
    bottom: 14px;
    transition: transform 1100ms cubic-bezier(.22, .61, .36, 1);
}

.rollover-dashboard-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    background: var(--mud-palette-surface);
    transform: translateY(100%);
}

.rollover-dashboard-widget:hover .rollover-dashboard-summary,
.rollover-dashboard-widget:focus-within .rollover-dashboard-summary { transform: translateY(-100%); }

.rollover-dashboard-widget:hover .rollover-dashboard-details,
.rollover-dashboard-widget:focus-within .rollover-dashboard-details { transform: translateY(0); }

.rollover-dashboard-widget:hover .rollover-dashboard-indicator,
.rollover-dashboard-widget:focus-within .rollover-dashboard-indicator { transform: rotate(180deg); }

.rollover-dashboard-widget:focus-visible .rollover-dashboard-card {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.rollover-dashboard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rollover-dashboard-item-label {
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rollover-dashboard-item-value {
    color: var(--mud-palette-primary);
    font-size: 20px;
    font-weight: 700;
}