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

.TopSoundRecordings {
    &-empty {
        color: var(--gray-500);
        font-size: 13px;
        margin: 0 auto;
        max-width: 265px;
        padding: 40px 0 100px;

        &-icon {
            height: 50px;
            margin-bottom: 5px;
            width: 50px;
        }
    }

    &-view-more-svg {
        fill: $link-color;
        vertical-align: middle;
    }

    &-button-row {
        display: block;
        font-weight: $font-weight-bold;
        padding: 5px 20px;
        text-align: right;
        width: 100%;
    }

    &-title {
        border-bottom: 1px solid var(--gray-400);
        display: flex;
        margin-top: 10px;
        padding: 8px 25px;
        vertical-align: middle;
        .TopSoundRecordings-heading {
            margin-bottom: 0;
        }
    }

    &-titleRight {
        align-self: flex-end;
        color: var(--gray-400);
        flex-grow: 3;
        font-weight: $font-weight-bold;
        line-height: 24px;
        text-align: right;
    }

    &-textAlignRight {
        float: right;
    }
}