@import './color-palette.css';

:root {
    --table-border-color: var(--gray-300);
    --table-sorted-header-bg: var(--gray-200);
    --table-hover-row-bg: var(--gray-100);
    --table-sorted-column-bg: var(--gray-100);
}
.dark-theme {
    --table-border-color: var(--gray-500);
    --table-sorted-header-bg: var(--gray-600);
    --table-hover-row-bg: var(--gray-700);
    --table-sorted-column-bg: var(--gray-700);
}

#stats-packages td,
#stats-packages th {
    border: 0;
    padding: 10px 20px 10px 10px;
    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;
}

.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: 24px;
}
.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: var(--table-hover-row-bg);
    cursor: pointer;
}
.sortable td[data-sorted] {
    background: var(--table-sorted-column-bg);
}

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

#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
    ) {
    display: none !important;
}
#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: 12px;
    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) !important;
    border-width: 1px 0 0 !important;
    align-items: center;
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    width: 220px;
    background: transparent;
    padding: 5px 8px;
    overflow: hidden;
}
#stats-dashboard tr[data-size='xs'] {
    display: none;
}
#stats-dashboard .ui-metrics {
    justify-content: center;
    margin-bottom: 32px;
}
#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: 15px;
    }
}
#stats-dashboard .ui-metric .value {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}
@media (min-width: 768px) {
    #stats-dashboard .ui-metric .value {
        font-size: 64px;
    }
}
#stats-dashboard .ui-metric .label {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    margin-top: 10px;
}
@media (min-width: 768px) {
    #stats-dashboard .ui-metric .label {
        font-size: 24px;
        text-align: left;
        max-width: 10ch;
        margin-left: 30px;
        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;
    text-align: left !important;
}
#stats-dashboard #stats-packages td a {
    font-weight: 600;
    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;
    }
}