/* metric */
.metric-card {
    &.small {
        .rz-stack {
            width: 223px;
            
            .metric-header {
                .metric-header-tools {
                    margin-left: auto;
                    display: flex;
                    align-items: center;
                    
                    sl-button.icon-button::part(base) {
                        width: 28px;
                        height: 26px;
                        padding-block: 3px;
                    }
                }
            }
        }
    }

    &.large {
        .rz-stack {
            min-width: 483px;
        }
    }

    &.hourly-metric {
        .apexcharts-tooltip {
            background-color: var(--va-grey);
            color: var(--va-white-dark);
            border-radius: 6px;
            font-size: 14px;
        }

        .apexcharts-tooltip-title {
            background-color: var(--va-grey-dark) !important;
            color: var(--va-white-dark);
            font-weight: bold;
            padding: 3px 12px;
            border-radius: 4px 4px 0 0;
        }

        .apexcharts-xaxis-label,
        .apexcharts-yaxis-label {
            fill: var(--va-white-darker);
            font-size: 11px;
            font-weight: normal;
        }

        .apexcharts-xaxis-title-text {
            fill: var(--va-white-dark);
            font-size: 14px;
            font-weight: normal;
        }

        .apexcharts-yaxis-title-text {
            fill: var(--va-white-dark);
            font-size: 14px;
            font-weight: normal;
        }

        .apexcharts-datalabel {
            font-size: 10px;
            font-weight: bold;
        }

        .apexcharts-legend-marker {
            stroke-width: 0;
        }
    }

    .rz-stack {
        .metric-header {
            display: flex;
            width: 100%;

            .metric-header-tools {
                margin-left: auto;
            }
        }

        .metric-title {
            letter-spacing: 2px;
            font-size: 14px;
        }

        .metric-subtitle {
            letter-spacing: 1px;
            font-size: 12px;
        }

        .metric-legend {
            margin-top: 1rem;

            td {
                padding-left: .3em;
                padding-right: .3em;
            }
        }
    }
}

/* period selection */
#historic-data-get-button {
    .va-button .rz-button {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* complaints table */
#complaints-table {

    .rz-numeric-up{
        display: none;
    }

    .rz-numeric-down {
        display: none;
    }

    .rz-data-grid {
        thead {
            .rz-cell-filter-content {
                min-height: 1.775rem;

                .rz-cell-filter-label {
                    height: 15px !important;
                }
            }

            .rz-button.rz-base.rz-shade-default {
                background-color: var(--va-grey-light);
            }
        }
    }
}