@import url('../../../vars.css');

.stats-card {
    min-height: 340px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
    background: var(--white);

    & .title-and-icon,
    & .filters {
        background: #f9f9f8;
    }

    & .title-and-icon {
        padding: 0 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        & button {
            border: none;

            &:hover {
                opacity: 0.5;
            }

            & path {
                fill: var(--warm-grey);
            }

            &.active path {
                fill: var(--black);
            }
        }
    }

    & h2 {
        padding: 20px;
        padding-inline-start: 0;
    }

    & .filters {
        padding: 0 20px 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        @media (--md-down) {
            flex-direction: column;
        }
    }

    & .tabs {
        border-bottom: 1px solid var(--grey);
        height: 100%;

        & button {
            border: none;
            margin-inline-end: 30px;
            padding: 0 0 10px;
            position: relative;
            top: 1px;
            background: none;
            font-family: var(--base-font-family);
            font-size: var(--font-size-xs);
            color: var(--warm-grey);
            text-transform: uppercase;
            letter-spacing: 0.4px;

            &.selected {
                border-bottom: 1px solid var(--black);
                font-weight: 600;
                color: var(--black);
            }

            &:last-child {
                margin-inline-end: 0;
            }
        }
    }

    & .content {
    }
}
