.PlacementsTile {
    border: 1px solid var(--gray-400);
    border-radius: 4px;
    height: 100%;
    margin-bottom: 15px;
    padding: 15px;

    &:hover {
        background-color: var(--gray-200);
        cursor: pointer;
    }

    &-no-pointer-white:hover {
        background-color: var(--white);
        cursor: auto;
    }

    &-separator {
        border-top: 1px solid var(--gray-400);
        margin: 10px 0;
    }

    &-image-column {
        &-inner {
            background-color: var(--gray-200);
            background-size: cover;
            border-radius: 3px;
            height: 0;
            padding: 100% 0 0;
        }
    }

    .PlacementsTile-image-column {
        width: 30%;
    }

    .Engagement-container &-image-column + &-column {
        padding-left: 0;
        width: 66.6%;
    }

    &-image-placeholder-inner {
        padding-top: 100%;
        position: relative;
        width: 100%;

        .Icons-playlist-placeholder {
            bottom: 0;
            height: 100%;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
        }
    }

    /**
     * TODO Temporary solution. Will be resolved by designer team after appearing s3 storage
     * for image assets
     */
    &-spotify {
        background-image: url("images/Spotify.svg");
        background-size: cover;
        display: inline-block;
        height: 15px;
        width: 15px;
    }

    &-apple-music {
        background-image: url("images/Apple.png");
        background-size: cover;
        display: inline-block;
        height: 15px;
        width: 15px;
    }

    &-amazon-music {
        background-image: url("images/amazon_unlimited.png");
        background-size: cover;
        display: inline-block;
        height: 15px;
        width: 15px;
    }

    &-store-title {
        color: var(--gray-700);
        font-weight: 500;
        padding-left: 5px;
        text-transform: capitalize;
    }

    &-playlist-title {
        display: inline-block;
        font-size: 18px;
        font-weight: 500;
        max-width: 100%;

        &-link:hover {
            cursor: pointer;
        }

        &-available {
            display: inline-block;
            max-width: 94%;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
            white-space: nowrap;

            /* stylelint-disable max-nesting-depth */
            &:hover {
                text-decoration: underline;
            }
        }

        &-available-nolink {
            cursor: default;
            display: inline-block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
            white-space: nowrap;
        }

        &-unavailable {
            color: var(--gray-700);
            font-weight: 500;
        }
    }

    &-track-title-and-artist {
        font-size: 14px;
        margin-bottom: 0;
        padding-top: 2px;
    }

    &-track-title {
        font-weight: 500;

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

    &-artist-name {
        &:hover {
            cursor: pointer;
            text-decoration: underline;
        }
    }

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

    &-info {
        &-column {
            /* Missing grid classes in DML workstation */
            /* stylelint-disable selector-class-pattern */
            &.col-xs-4 {
                padding: 0 5px;
            }

            &:first-child.col-xs-4 {
                padding-left: 15px;
            }
            /* stylelint-enable */
        }

        &-heading {
            color: var(--gray-500);
            font-weight: 500;
            margin-bottom: 0;
            text-transform: uppercase;
        }

        &-value {
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
        }

        &-value-not-applicable,
        &-value-unavailable {
            color: var(--gray-500);
            font-weight: 400;
        }
    }

    &-loader {
        border-top: 1px solid var(--gray-800);
        display: inline-block;
        margin: 6px 0;
        width: 40px;

        &-playlist {
            border-top-width: 2px;
            width: 80px;
        }

        &-followers {
            margin: 8px 0;
            width: 15px;
        }
    }
}

.PlacementsTileSas {
    background-color: var(--white);

    &:hover {
        background-color: var(--white);
    }
}