@import "color-palette-slSz90E.css";

@layer page {
    :root {
        --table-border-color: light-dark(var(--gray-300), var(--gray-500));
        --table-sorted-header-bg: light-dark(var(--gray-200), var(--gray-600));
    }

    .sortable th {
        background: no-repeat transparent
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-sort fa-w-10 fa-2x'%3E%3Cpath fill='%23BBBBBB' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z' class=''%3E%3C/path%3E%3C/svg%3E");
        background-size: 14px 14px;
        background-position: right 3px center;
        cursor: pointer;
        padding-right: var(--spacing-6);
    }
    .sortable th[data-sorted='ASC'] {
        background: no-repeat var(--table-sorted-header-bg)
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-up fa-w-10 fa-2x'%3E%3Cpath fill='currentColor' d='M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z' class=''%3E%3C/path%3E%3C/svg%3E");
        background-size: 14px 14px;
        background-position: right 3px center;
    }
    .sortable th[data-sorted='DESC'] {
        background: no-repeat var(--table-sorted-header-bg)
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-down fa-w-10 fa-2x'%3E%3Cpath fill='currentColor' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z' class=''%3E%3C/path%3E%3C/svg%3E");
        background-size: 14px 14px;
        background-position: right 3px center;
    }
    .sortable tr:hover td {
        background: light-dark(var(--gray-100), var(--gray-700));
        cursor: pointer;
    }
    .sortable td[data-sorted] {
        background: light-dark(var(--gray-100), var(--gray-700));
    }

    #stats-packages td,
    #stats-packages th {
        border: 0;
        padding: var(--spacing-2) var(--spacing-5) var(--spacing-2) var(--spacing-2);
        vertical-align: top;
    }
    #stats-packages th {
        background-color: var(--page-background);
        padding-right: 28px;
    }
    #stats-packages th[data-sorted] {
        background-color: var(--table-sorted-header-bg);
    }
    #stats-packages tr {
        border: 1px solid var(--table-border-color);
        border-width: 0 0 1px 0;
    }

    #stats-packages .backer .backer_logo {
        max-height: 44px;
        max-width: 155px;
    }
    #stats-packages .backer .backer_logo img,
    #stats-packages .backer .backer_logo svg {
        max-height: 44px;
        max-width: 155px;
    }

    #btn-view-in-full-screen-wrapper {
        display: flex;
    }
    @media (min-width: 768px) {
        #btn-view-in-full-screen-wrapper {
            justify-content: flex-end;
            padding: 0;
        }
    }

    #stats-dashboard .ui-page-grid-content-right-sidebar {
        display: block; /* needed to undo the 'display: grid' set in other styles */
    }
    #stats-dashboard .ui-page-container {
        max-width: unset;
        width: 100%;
    }
    #stats-dashboard table {
        font-size: var(--font-size-xs);
        width: 100%;
    }
    #stats-dashboard tbody {
        display: grid;
        grid-template-columns: repeat(auto-fill, 220px);
        justify-content: center;
    }
    #stats-dashboard tr {
        border: 1px solid var(--table-border-color);
        border-width: 1px 0 0;
        align-items: center;
        justify-content: space-between;
        display: flex;
        flex-direction: row;
        width: 220px;
        background: transparent;
        padding: var(--spacing-1) var(--spacing-2);
        overflow: hidden;
    }
    #stats-dashboard tr[data-size='xs'] {
        display: none;
    }
    #stats-dashboard .ui-metrics {
        justify-content: center;
        margin-bottom: var(--spacing-8);
    }
    #stats-dashboard .ui-metric {
        align-items: center;
        border: none;
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    @media (min-width: 768px) {
        #stats-dashboard .ui-metric {
            flex-direction: row;
        }
    }

    #stats-dashboard .symfony-logo,
    #stats-dashboard .ui-heading {
        display: none;
    }
    @media (min-width: 992px) {
        #stats-dashboard .symfony-logo {
            display: inline-flex;
        }

        #stats-dashboard .symfony-logo svg {
            height: 64px;
            width: 64px;
            margin-right: var(--spacing-4);
        }
    }
    #stats-dashboard .ui-metric .value {
        font-size: 48px;
        font-weight: var(--font-weight-bold);
        line-height: 1;
    }
    @media (min-width: 768px) {
        #stats-dashboard .ui-metric .value {
            font-size: 64px;
        }
    }
    #stats-dashboard .ui-metric .label {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        line-height: 1.2;
        text-align: center;
        margin-top: var(--spacing-2);
    }
    @media (min-width: 768px) {
        #stats-dashboard .ui-metric .label {
            font-size: var(--font-size-2xl);
            text-align: left;
            max-width: 10ch;
            margin-left: var(--spacing-8);
            margin-top: 0;
        }
    }
    #stats-dashboard .ui-metric .label a,
    #stats-dashboard .ui-metric .label a:hover {
        color: inherit;
        cursor: auto;
        border: 0;
        text-decoration: none;
    }
    #stats-dashboard .content-sidebar-wrapper {
        display: block;
    }
    #stats-dashboard #stats-packages td {
        display: block;
        padding: 0;
    }
    #stats-dashboard #stats-packages td a {
        font-weight: var(--font-weight-semibold);
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 15ch;
    }
    #stats-dashboard #stats-packages tr:hover td,
    #stats-dashboard .sortable td[data-sorted],
    #stats-dashboard .sortable td:hover {
        background: transparent;
    }
    #stats-dashboard .sortable tr:hover td {
        cursor: auto;
    }
    #stats-dashboard.dark-theme .symfony-logo {
        svg {
            filter: invert(1);
            opacity: 0.8;
        }
    }

    /* Download stats filter pills */
    #downloads-type-filter label {
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-full);
        cursor: pointer;
        display: inline-flex;
        font-size: var(--font-size-sm);
        margin: 0 var(--spacing-1);
    }
    .dark-theme #downloads-type-filter label {
        border-color: var(--gray-600);
    }
    #downloads-type-filter label.active {
        background: var(--blue-700);
        color: var(--gray-100);
    }
    .dark-theme #downloads-type-filter label.active {
        background: var(--gray-300);
        color: var(--gray-700);
    }
    #downloads-type-filter label input {
        display: none;
    }
    #downloads-type-filter label span {
        display: block;
        min-width: 45px;
        padding: var(--spacing-1) var(--spacing-2);
        text-align: center;
    }
}

/* some elements overridden in dashboard mode use Bootstrap utilities (.d-sm-block,
   .text-end) that set the same property with '!important'; '!important' inverts the
   layer order, so these rules must live in the same 'vendor' layer as Bootstrap
   to win by specificity instead */
@layer vendor {
    #stats-dashboard
        :is(
            #sln,
            header,
            .highlight-top-horizontal,
            .breadcrumb-nav,
            .page-title-wrapper,
            .sidebar,
            .backer,
            #stats-packages thead,
            #stats-packages tbody tr td:nth-child(3),
            #stats-packages tbody tr td:nth-child(4),
            footer,
            .badge.ui-badge-warning,
            #btn-view-in-full-screen,
            .ui-metrics .ui-metric:nth-child(1),
            .ui-metrics .ui-metric:nth-child(2),
            #stats-methodology,
            #btn-view-in-full-screen-wrapper,
            #downloads-type-filter
        ) {
        display: none !important;
    }
    #stats-dashboard #stats-packages td {
        text-align: left !important;
    }
}