.ReportsPanel {
    &-heading {
        margin-bottom: 16px;
    }

    &-button {
        align-items: center;
        display: inline-flex;
        margin-top: 16px;

        .Glyph {
            margin-right: 4px;
        }

        &:not(:last-child) {
            margin-right: 16px;
        }
    }

    &-reports-list {
        margin-top: 16px;

        &-header {
            border-top: 1px solid var(--gray-100);
            color: var(--gray-500);
            display: flex;
            font-weight: 500;
            padding-bottom: 10px;
            padding-left: 16px;
            padding-right: 16px;
            padding-top: 10px;
            text-transform: uppercase;
        }

        &-actions-cell {
            display: flex;
            visibility: hidden;

            &-button {
                &:disabled {
                    opacity: .5;
                }

                &:not(:last-child) {
                    margin-right: 16px;
                }

                &--download {
                    &, &:hover, &:disabled { 
                        color: var(--gray-700);
                    }
                }

                &--delete {
                    &, &:hover, &:disabled {
                        color: var(--red);
                    }
                }
            }
        }

        &-row {
            align-items: center;
            border-top: solid 1px var(--gray-100);
            display: flex;
            font-size: 14px;
            height: 56px;
            padding-left: 16px;
            padding-right: 16px;

            &:last-child {
                border-bottom: solid 1px var(--gray-100);
            }

            &--active, &:hover {
                background-color: var(--gray-100);

                .ReportsPanel-reports-list-actions-cell {
                    visibility: visible;
                }
            }

            &--selected {
                // Not in frontend-react-components
                background-color: #EFF7FF;
            }

            &--added {
                color: var(--gray-600);
            }
        }

        &-cell {
            &:nth-child(1) {
                text-align: center;
                width: 16px;
            }

            &:nth-child(2) {
                width: calc((100% - 112px) * .6);
            }

            &:nth-child(3) {
                text-align: right;
                width: calc((100% - 112px) * .4);

                .TableCellLoader-item {
                    margin-left: auto;
                }
            }

            &:nth-child(4) {
                width: 48px;
            }

            &:not(:last-child) {
                margin-right: 16px;
            }

            .Checkmark {
                fill: var(--green);
                margin-right: 4px;
            }

            .Warning {
                fill: var(--red);
                margin-right: 4px;
            }
        }

        &-currency-amount {
            font-weight: normal;
        }

        &-currency-code {
            font-weight: 500;
        }

        &-warning-glyph {
            fill: var(--red);
        }
    }

    &-empty-state {
        padding-bottom: 100px;
        padding-top: 100px;
        text-align: center;

        &-image {
            margin-bottom: 50px;
        }
    }

    &-empty-heading {
        color: var(--gray-800);
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 16px;
    }
    
    &-empty-message {
        color: var(--gray-600);
        font-size: 14px;
    }
}