@import "src/styles/colors";

.RecentRevenueList {
    margin: 0;

    & .LoadingIndicator {
        height: 100px;
    }

    &-heading {
        font-size: 18px;
        font-weight: 500;
        padding: 5px 0;
        text-transform: capitalize;
    }

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

    &-item {
        border: 1px solid $grey_100;
        height: 100px;
        text-align: center;
        min-width: 210px;
        border-radius: 3px;
        margin: 0 0 0 10px;
        flex-grow: 1;

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

    &-item-hover:hover {
       border: 1px solid $grey_200;
       box-shadow: 0 1px 5px 0 rgba(0,0,0,0.20);
       transition: border 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
       cursor: pointer;
    }

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

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

    &-link {
        color: $turtle;

        &:hover {
            color: $turtle;
        }
    }

    &-revenue-empty {
        color: $grey_200;
        font-size: 14px;
        font-style: italic;
        font-weight: 100;
        padding: 10px;
    }

    &-interval {
        color: $grey_200;
        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;
    }
}