@mixin table-borders(
    $node,
    $verticalClass: null,
    $bottom-color: var(--gray-300),
    $side-color: var(--gray-200)
) {
    #{$node} {
        border-bottom: 1px solid $bottom-color;
    }

    @if $verticalClass {
        &.#{$verticalClass} {
            #{$node} + #{$node} {
                border-left: 1px solid $side-color;
            }
        }
    }
}

@mixin table-cell-size($name, $minWidth: 0) {
    th.chart-col-#{$name},
    td.cell-#{$name} {
        max-width: 0;
        width: auto;

        @if $minWidth != 0 {
            min-width: $minWidth;
        }
    }

    th.chart-col-#{$name} {
        word-wrap: break-word;
    }
}

@mixin cell-green {
    color: var(--green);
}

@mixin cell-red {
    color: var(--red);
}

@mixin cell-number {
    min-width: 70px;
}

@mixin cell-date {
    min-width: max-content;
}

@mixin cell-text-150 {
    min-width: 150px;
}

@mixin cell-text-200 {
    min-width: 200px;
}

.Table {
    position: relative;

    &.bordered {
        @include block-shadow;

        background-color: var(--white);
        border-radius: $border-radius;
    }

    &-container {
        overflow-x: auto;
    }

    &-empty {
        margin: 4rem auto;
    }

    &-header {
        border-bottom: 1px solid var(--gray-200);
    }

    &-spinner,
    &-overlay {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    &-overlay {
        background: var(--white);
        opacity: 0;
        visibility: hidden;
        transition: ease opacity 0.5s;
    }

    &-spinner {
        visibility: hidden;

        .LoadingSpinner {
            height: auto;
            margin: 0 auto;
            position: sticky;
            top: 30vh;
        }
    }

    &.loading > &-spinner {
        visibility: visible;
    }

    &.loading > &-overlay {
        visibility: visible;
        opacity: 0;
    }

    .SortGlyph {
        fill: var(--gray-400);
    }

    .table {
        z-index: 0;
        position: relative;

        @include table-borders(th, 'vertical-lines');
        @include table-borders(td, 'vertical-lines');

        th,
        td {
            background-color: var(--white);
        }

        th {
            color: var(--gray-500);
            font-weight: 500;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;

            &.col-sorted,
            &.col-sortable:hover {
                color: var(--gray-800);
            }
        }

        td {
            @include truncated-text;

            padding: 1rem;
            vertical-align: middle;
            white-space: nowrap;
            height: 5rem;

            & > div,
            span {
                @include truncated-text;
            }
        }

        tr {
            .col-sorted {
                background-color: var(--gray-100);
            }

            &:hover > td {
                background-color: var(--gray-100);
            }
        }

        .col-frozen {
            box-shadow: 0 0 10px rgb(0 0 0 / 12.5%);
            clip-path: inset(0 -10px 0 0);
            position: sticky;
            z-index: 1;
        }

        th.chart-date {
            width: 8rem;
        }

        th.chart-number {
            width: 7rem;
        }

        th.chart-key {
            width: 3rem;
        }

        th.chart-main-dim {
            width: 20%;
        }

        th.chart-secondary-dim {
            width: 300px;
        }

        tr.row-expanded > td {
            border-bottom: 2px solid var(--divider);
        }

        tr.row-expanded-content > td {
            height: 300px;
            position: relative;
            background-color: #fff;

            .LoadingIndicator {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
        }

        th.chart-date,
        th.chart-number,
        th.chart-metric,
        th.chart-change,
        td.chart-number,
        td.chart-date,
        td.chart-metric,
        td.chart-expander,
        td.chart-change {
            text-align: right;
            justify-content: flex-end;
        }

        td.chart-centered,
        th.chart-centered {
            text-align: center;
            justify-content: center;
        }

        td.chart-expander {
            cursor: pointer;
            text-overflow: clip;
        }

        &.table-hover {
            tr > td:hover {
                cursor: pointer;
            }

            tr.row-expanded-content:hover {
                background-color: #fff;
                cursor: default;
            }
        }

        .table > tbody > tr:first-child > td {
            border-top: none;
        }

        @include table-cell-size('song');
        @include table-cell-size('songName', 250px);
        @include table-cell-size('artist');
        @include table-cell-size('artistName', 200px);
        @include table-cell-size('peakPosition', 90px);
        @include table-cell-size('timeOnChart', 80px);

        td.grid-cell,
        th.grid-cell {
            max-width: unset;
            min-width: unset;
        }
    }

    &.loading .table tr .col-sorted {
        background-color: var(--white);
    }

    /* stylelint-disable no-descending-specificity */

    &-grid {
        display: grid;

        thead,
        tbody,
        tr {
            display: contents;
        }

        th,
        td {
            border-top: 0;
        }

        th {
            display: grid;
            align-content: end;
            align-items: center;
            grid-auto-flow: column;
            grid-auto-columns: minmax(min-content, max-content);
            padding-left: 8px;
            padding-right: 8px;

            &.text-right {
                justify-content: end;
            }
        }

        td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: flex;
            align-items: center;

            &.text-right {
                justify-content: flex-end;
            }
        }

        tr {
            td:last-child,
            th:last-child {
                border-right: 0;
            }

            &.row-expanded-content {
                td {
                    grid-column: 1 / -1;
                }
            }
        }

        tr:last-child {
            td {
                border-bottom: 0;
            }
        }
    }
    /* stylelint-enable no-descending-specificity */
}

.TableColumn {
    &.col-sortable,
    &.col-sorted {
        color: var(--link-color);
        cursor: pointer;
    }

    &.chart-col {
        &-releaseDate {
            white-space: nowrap;
        }
    }

    .Glyph {
        width: 12px;
        height: 12px;
    }
}

.ChangeCell {
    .moveUp,
    .moveDown {
        display: flex;
    }

    .moveUp {
        color: var(--green);
    }

    .moveDown {
        color: var(--red);
    }

    .noChange {
        color: var(--gray-700);
    }

    .Glyph {
        width: 1.4rem;
        height: auto;

        &.ArrowUp {
            fill: var(--green);
        }

        &.ArrowDown {
            fill: var(--red);
        }
    }
}

.DateCell {
    white-space: nowrap;
}

.CoverArtCell {
    align-items: center;
    display: flex;
    max-width: 100%;

    .CoverArt {
        margin-right: 0.714rem;
    }

    .format {
        color: var(--text-secondary);
    }
}

.NoticeCell {
    max-width: 100%;

    .inner {
        padding: 0 0.571rem;
        font-size: 0.857rem;
        line-height: 1.286rem;
        display: flex;
        align-items: center;
    }

    .Glyph-wrapper {
        position: relative;
        top: -1px;
    }

    .notice {
        &-wrapper {
            display: flex;
            gap: 0.714rem;

            .rounded {
                min-width: 0;
            }

            .GlyphIcon {
                color: var(--error-650);
            }
        }

        &-code {
            border-radius: 14px;
            font-weight: 400;
            background: #e3e5e8;
        }
    }

    .Glyph {
        fill: var(--red);
    }

    .badge {
        background: $gray-200;
        border-radius: 14px;
        font-size: 0.857rem;
        font-weight: 400;
    }

    .warnings {
        background: #e3e5e8;

        .GlyphIcon {
            color: #c76d00;
        }
    }
}

.ReviewQueueNotice {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 300px;

    .Alert-elements {
        width: 100%;
    }

    &-alert {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: space-between;

        &-count {
            border-radius: 3px;
            color: var(--gray-700);
            padding: 2px 4px;
            font-size: 0.9rem;

            &-error {
                background-color: var(--error-200);
            }
            &-warn {
                background-color: var(--warning-200);
            }
        }
    }
}

.ChartTable {
    .row-alt-hover {
        &:hover {
            cursor: pointer;
        }
    }

    .row-hover {
        &:hover {
            cursor: pointer;
        }
    }
}

.OfferTypeCell {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.StarredCell {
    cursor: pointer;
    outline: none;
}

.PlaylistLinkCell {
    align-items: center;
    display: flex;
    min-width: 0;

    &-link {
        overflow: hidden;

        &:hover .TruncatedText {
            text-decoration: underline;
        }
    }
}

.ThumbnailPlaylistLinkCell {
    display: flex;
    width: 100%;

    .PlaylistLinkCell {
        flex: 1;
    }

    &-details {
        font-size: 1rem;
        font-weight: normal;
        letter-spacing: normal;
        line-height: 1;
        margin-left: 0.714rem;
        text-transform: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

.StorefrontCountCell {
    align-items: center;
    cursor: pointer;
    display: flex;

    &-count {
        background-color: var(--gray-600);
        border-radius: 0.214rem;
        color: var(--white);
        padding: 0 0.5rem;
    }
}

.ProductLinkWithUpcCell,
.ProductCell {
    &.deleted .TruncatedText {
        text-decoration: line-through;
    }

    &-upc {
        color: var(--gray-600);
        font-size: 0.85rem;
    }
}

.ExternalVideoLinkCell,
.ExternalChannelLinkCell {
    a {
        overflow: hidden;

        &:hover .TruncatedText {
            text-decoration: underline;
        }
    }
}

.ClaimStatusCell {
    font-size: 90%;
    font-weight: inherit;
    text-transform: none;
}

.ClaimPolicyCell {
    width: 100%;

    &-policy {
        display: flex;
        align-self: center;
        justify-content: space-evenly;

        &:hover {
            cursor: pointer;
        }
    }

    svg {
        margin-bottom: 3px;
    }
}

.loading {
    width: 100%;

    &-content-wrapper {
        width: 10.286rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    &-bar {
        width: 100%;
        height: 1.071rem;
        background-color: var(--gray-100);

        @include background-gradient;

        animation: animated-bars $animation-duration infinite $cubic-fast;

        &.small {
            width: 6.786rem;
            margin-top: 0.357rem;
        }
    }

    &-common-bar {
        height: 1.071rem;
        width: 100%;
        background-color: var(--gray-100);

        @include background-gradient;

        animation: animated-bars $animation-duration infinite $cubic-slow;
    }
}

.text-content {
    width: 15rem;
}