@import "src/styles/variables.scss";

.TopSoundRecordingsItem {
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    padding: 10px 25px;

    &-icon {
        align-self: flex-start;
        background-color: var(--gray-100);
        height: 40px;
        position: relative;
        width: 60px;

        &-container {
            height: 40px;
            width: 60px;
        }

        &-image {
            border-radius: 3px;
            height: 40px;
            margin-left: 20px;
            width: 40px;
        }
    }
    .Icons-playlist-placeholder {
        height: 40px;
        width: 40px;
    }
    &-idOverlay {
        background-color: var(--white);
        border-radius: 0 0 2px;
        color: var(--gray-500);
        display: block;
        float: left;
        font-size: 10px;
        font-weight: bold;
        height: 40px;
        line-height: 40px;
        position: absolute;
        text-align: left;
        top: 0;
        vertical-align: middle;
        width: 20px;
    }

    &-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: calc(100% - 60px);
        padding-left: 10px;
        width: 90%;

        &-top {
            display: inline-block;
            font-size: 13px;
            max-width: 75%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &.TopSoundRecordingsItem-text-alignRight { /* stylelint-disable-line */
                font-weight: $weight_bold;
            }
        }

        &-bottom {
            color: var(--gray-600);
            display: inline-block;
            font-size: 11px;
            max-width: 75%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        &-alignRight {
            float: right;
            max-width: 25%;
        }

        &-artist {
            color: var(--gray-800);
            font-size: 12px;
        }

        &-percentage {
            font-weight: $weight_bold;
        }

        &-green {
            color: #06a459;
        }

        &-red {
            color: var(--parrot);
        }

        &-gray {
            color: var(--gray-500);
        }
    }
}