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

.RecentRevenueList {
    margin: 0;

    & .LoadingIndicator {
        height: 100px;
    }

    &-empty {
        color: var(--gray-500);
        font-size: 14px;
    }

    &-heading {
        padding: 0 0 5px;
    }

    &-items {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    &-item {
        border: 1px solid var(--gray-200);
        border-radius: 3px;
        flex-grow: 1;
        height: 100px;
        margin: 0 0 0 10px;
        min-width: 210px;
        text-align: center;

        &:first-of-type {
            margin-left: 0;
        }
    }

    &-item-hover:hover {
        border: 1px solid var(--gray-200);
        box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
        cursor: pointer;
        transition: border .3s ease, box-shadow .3s ease, background-color .3s ease;
    }

    &-revenue {
        font-size: 24px;
        font-weight: 300;

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

    &-link {
        color: var(--turtle);

        &:hover {
            color: var(--turtle);
        }
    }

    &-revenue-empty {
        color: var(--gray-200);
        font-size: 14px;
        font-style: italic;
        font-weight: 100;
        padding: 10px;
    }

    &-interval {
        color: var(--gray-500);
        font-size: 13px;
        font-weight: 500;
        padding: 23px 0 0;
        text-transform: uppercase;
    }

    &-more-link {
        font-weight: 500;
        margin: 20px 0;
        text-align: right;
        text-transform: uppercase;
    }

    &-no-revenue {
        display: block;
        font-size: 16px;
        height: 100px;
        padding: 40px;
        text-align: center;
    }
}