// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Dashboard
//  _____________________________________________

//
//  Variables
//  _____________________________________________

@dashboard__font-size__base: 1.3rem;
@dashboard__font-size-l: 2.4rem;
@dashboard-tabs__padding: 2rem;
@dashboard-tabs__background-color: @color-white;

//  Secondary column
@dashboard-secondary-table__width-px: 235px;
@dashboard-secondary-table-col-name__width-px: 135px;
@dashboard-secondary-table-col-value__width-px: 50px;

@dashboard-secondary-table-col-name__width-pct: @dashboard-secondary-table-col-name__width-px * 100% / @dashboard-secondary-table__width-px; // 57.44680851%
@dashboard-secondary-table-col-value__width-pct: @dashboard-secondary-table-col-value__width-px * 100% / @dashboard-secondary-table__width-px; // 21.27659574%

//
//  Tables
//  ---------------------------------------------

.dashboard-data {
    background: @dashboard-tabs__background-color;
    font-size: @dashboard__font-size__base;
    width: 100%;

    tr {
        &._clickable {
            cursor: pointer;
        }
    }

    th,
    td {
        padding: 1rem 0 1rem 1rem;
        &:first-child {
            padding-left: 0;
        }
    }

    &.admin__table-primary {
        th {
            border-top: 0;
        }
    }

    //  Primary column
    .dashboard-main & {
        @dashboard-table__width-px: 560px;
        @dashboard-table-col-product__width-px: 392px;
        @dashboard-table-col-name__width-px: 308px;
        @dashboard-table-col-value__width-px: 84px;

        @dashboard-table-col-product__width-pct: @dashboard-table-col-product__width-px * 100% / @dashboard-table__width-px; // 70%
        @dashboard-table-col-name__width-pct: @dashboard-table-col-name__width-px * 100% / @dashboard-table__width-px; // 55%
        @dashboard-table-col-value__width-pct: @dashboard-table-col-value__width-px * 100% / @dashboard-table__width-px; // 15%

        th,
        td {
            text-align: right;
            white-space: nowrap;
            width: @dashboard-table-col-value__width-pct;
        }

        .col-name {
            text-align: left;
            white-space: normal;
            width: @dashboard-table-col-name__width-pct;
        }

        .col-product {
            width: @dashboard-table-col-product__width-pct;
        }

        .col-orders {
            text-align: left;
        }
    }

    .dashboard-secondary & {
        .col-popularity,
        .col-total {
            text-align: right;
            width: @dashboard-secondary-table-col-value__width-pct;
        }

        .col-customer,
        .col-search-query {
            width: @dashboard-secondary-table-col-name__width-pct;
        }
    }
}

.dashboard-container {
    .empty-text {
        background: @dashboard-tabs__background-color;
        font-size: @dashboard__font-size__base;
    }

    .ui-tabs-panel {
        border-top: 1px solid @color-gray68;
    }
}

//
//  Primary column
//  _____________________________________________

//
//  Diagram
//  ---------------------------------------------

//  Diagram disabled
.dashboard-diagram-disabled {
    padding: .5rem 2rem 2rem;
}

//  Range switcher
.dashboard-diagram-switcher {
    border-top: 1px solid @color-gray68;
    margin-top: -1px;
    padding: 2rem 2rem 0;

    .label {
        &:extend(.abs-visually-hidden all);
    }

    + .dashboard-diagram-tab-content {
        > .ui-tabs-panel {
            border-top: 0 none;
        }
    }
}

//
//  Totals: Revenue, Tax, Shipping, Quantity
//  ---------------------------------------------

.dashboard-totals {
    margin: 1rem 2rem 6rem;
}

.dashboard-totals-list {
    &:extend(.abs-clearfix all);
    &:extend(.abs-list-reset-styles all);
    display: table;
    width: 100%;
}

.dashboard-totals-item {
    display: table-cell;
    padding: 0 1rem 0 0;
    width: 25%;

    &:first-child {
        .price {
            color: @color-phoenix;
        }
    }
}

.dashboard-totals-label {
    display: block;
    font-size: @dashboard__font-size__base;
    font-weight: @font-weight__bold;
}

.dashboard-totals-value {
    font-size: @dashboard__font-size-l;
    font-weight: @font-weight__semibold;
}

//
//  Tabs
//  ---------------------------------------------

.dashboard-store-stats {
    .ui-tabs {
        &:extend(.abs-clearfix all);
        margin-bottom: 0;
        position: relative;

        &:before {
            .lib-background-gradient(
            @_background-gradient: true,
            @_background-gradient-direction: horizontal,
            @_background-gradient-color-start: rgba(255,255,255,0),
            @_background-gradient-color-end: @color-white,
            @_background-gradient-color-position: false
            );
            content: '';
            height: 4.8rem;
            position: absolute;
            right: 0;
            top: 0;
            width: 2rem;
        }
    }

    .ui-tabs-panel {
        //  ToDo UI: change the picture to html after loaders refactoring
        background: url(../images/ajax-loader-small.gif) no-repeat 50% 50%;
        min-height: 4.5rem;
    }

    .tabs-horiz {
        border-right: 1px solid @color-white; // IE9 fix
        float: left; // IE9 fix
        overflow-x: auto;
        white-space: nowrap;
        width: 100%; // IE9 fix

        .ui-state-default {
            display: inline-block;
            float: none;
            margin-right: .1rem;
        }
    }
}

//
//  Secondary column
//  _____________________________________________

.dashboard-container {
    .dashboard-secondary {
        padding-right: 3.5rem;
    }
}

.dashboard-item {
    margin-bottom: 3rem;
}

.dashboard-item-title {
    font-size: 1.8rem;
    font-weight: @font-weight__bold;
}

.dashboard-item-primary {
    &:first-child {
        .dashboard-sales-value {
            color: @color-phoenix;
        }
    }
}

.dashboard-sales-value {
    font-size: @dashboard__font-size-l;
    font-weight: @font-weight__semibold;
}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

    //
    //  Totals: Revenue, Tax, Shipping, Quantity
    //  -----------------------------------------

    .dashboard-totals-item {
        float: left;
        margin-bottom: 1rem;
        width: 50%;
    }
}