/* stylelint-disable selector-class-pattern, max-line-length */
.V2Thumbnail {
    border: 1px solid var(--gray-400, $gray-400);
    border-radius: 3px;
    height: 235px;
    width: 235px;

    &-preview {
        background: linear-gradient(to bottom, var(--mouse, $mouse) 0%, var(--gray-400, $gray-400) 100%);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 200%;
        height: 200px;
        padding: 10px 10px 0 10px;
        position: relative;
    }

    &-preview-mask {
        background: rgba(255, 255, 255, .5);
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2;
    }

    &-preview-card {
        background: rgba(255, 255, 255, .9);
        padding: 5px 5px 0 5px;
    }

    &-preview-player {
        border-bottom: 1px solid var(--gray-400, $gray-400);
        height: 70px;
    }

    &-preview-artwork {
        background: var(--gray-400, $gray-400);
        float: left;
        height: 65px;
        margin-right: 5px;
        width: 65px;
    }

    &-preview-artwork-image {
        height: 100%;
        width: 100%;
    }

    &-preview-info {
        overflow: hidden;
    }

    &-preview-product {
        font-weight: var(--weight-bold, $weight_bold);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &-preview-artist {
        font-size: 10px;
    }

    &-preview-controls {
        margin-top: 5px;
    }

    &-preview-player .Icons-play {
        display: inline-block;
        height: 15px;
        margin-right: 10px;
        position: relative;
        top: 5px;
        width: 15px;
    }

    &-preview-timeline {
        background: var(--gray-400, $gray-400);
        display: inline-block;
        height: 5px;
        width: 100px;
    }

    &-preview-timeline-inside {
        background: var(--gray-800, $gray-800);
        height: 5px;
        width: 25%;
    }

    &-preview-tracklist {
        font-size: 10px;
        height: 115px;
        overflow: hidden;
    }

    &-preview-track {
        border-bottom: 1px solid #fff;
        padding: 5px 0;
    }

    &-preview-track-number {
        color: var(--gray-500, $gray-500);
        display: inline-block;
        font-weight: var(--weight-bold, $weight_bold);
        margin-right: 10px;
    }

    &-preview-track-name {
        display: inline-block;
    }

    &-preview-track-details {
        display: inline-block;
        float: right;
    }

    &-preview-track-details .Icons-play {
        height: 10px;
        margin-right: 10px;
        width: 10px;
    }

    &-preview-track-duration {
        display: inline-block;
    }

    &-label {
        border-top: 1px solid var(--gray-400, $gray-400);
        color: var(--gray-500, $gray-500);
        font-weight: var(--weight-bold, $weight_bold);
        height: 30px;
        line-height: 30px;
        text-align: center;
        text-transform: uppercase;
    }

    & .Icons-audio-disabled,
    & .Icons-audio-enabled {
        height: 16px;
        margin-right: 5px;
        position: relative;
        top: 4px;
        width: 16px;
    }

    &-label-unavailable .Icons-audio-disabled {
        fill: var(--gray-400, $gray-400);
    }

    &-label-disabled .Icons-audio-disabled {
        fill: var(--gray-700, $gray-700);
    }

    &-label-enabled .Icons-audio-enabled {
        fill: var(--turtle, $turtle);
    }
}
/* stylelint-enable */