@use '../abstracts' as *;

/**
 * Dashboard Widget Styles
 */

.gfm-dashboard-widget {
    .gfm-db-stats {
        display: flex;
        gap: $space-lg;
        margin-bottom: $space-md;
        padding-bottom: $space-sm;

        .stat {
            strong {
                display: block;
                font-size: 24px;
                color: $text-main;
                font-weight: 800;
                letter-spacing: -0.02em;
            }

            span {
                font-size: 11px;
                color: $text-muted;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                font-weight: $weight-bold;
            }
            
            &:first-child strong {
                color: $primary;
            }
            
            &:last-child strong {
                color: $success;
            }
        }
    }

    h4 {
        margin: $space-sm 0 $space-xs 0;
        font-weight: 700;
        font-size: 13px;
        color: $text-light;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            padding: 12px 0;
            border-bottom: 1px solid $border;
            font-size: 13px;
            @include flex-between;
            transition: $transition-base;

            &:last-child {
                border-bottom: none;
            }

            .entry-info {
                strong {
                    color: $text-main;
                    font-weight: 600;
                }
                span {
                    color: $text-muted;
                    margin-left: 6px;
                    font-size: 12px;
                }
            }

            .gfm-view-link {
                text-decoration: none;
                font-weight: 700;
                color: $primary;
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: 0.05em;

                &:hover {
                    color: $primary-dark;
                }
            }
        }
    }

    .gfm-db-footer {
        margin-top: $space-md;
        padding-top: $space-sm;
        border-top: 1px solid $border;
        @include flex-between;

        .gfm-btn {
            padding: 8px 16px;
            font-size: 11px;
        }
    }
}