/* Metric title ----------------------- */
.title-metric {
    line-height    : 45px;
    font-family    : @main-font;
    font-size      : 42px;
    color          : #222222;

    .separator { font-size: 26px; }

    strong {
        font-family : @main-font;
        color       : #000000;
    }
}

.title-metric-unit {
    margin-left : 3px;
    line-height : 0.6em;
    font-size   : 0.6em;
}

.title-subscript {
    font-size      : 10px;
    text-transform : uppercase;
    color          : #444444;
}

/* Card ------------------------------- */
.card {
    position         : relative;
    background-color : #ffffff;
    box-shadow       : 1px 1px 4px 1px rgba(221, 221, 211, .60);
    text-align       : center;

    .title-metric {
        font-family    : @main-font;
    }

    .title-subscript {
        width       : 160px;
        margin      : 0 auto;
        font-family : @main-font-medium;
        cursor      : default;
    }

    .card-secondary-metric {
        .title-metric {
            font-family : @main-font-regular;
            font-size   : 25px;
            line-height : 25px;
            color       : #ffffff;
        }

        .title-subscript {
            font-family : @main-font-medium;
            color       : #ffffff;
        }
    }

    &.card-not-available {
        .title-metric {
            font-family : @main-font;
            color       : #dddddd;
        }

        .meter-chart .pillow-gauge-notch { display: none; }

        .pillow-gauge-caption {
            .value { display: none; }
            .unit  { display: none !important; } /* override size specifics in pillow */

            &:after {
                content : "n/a";
                color   : #dddddd;
            }
        }
    }
}

.card-secondary-metric {
    visibility       : hidden;
    position         : absolute;
    bottom           : 0;
    width            : 100%;
    height           : 0;
    background-color : #6666cc;
    pointer-events   : none;
}

.card-metric:first-child { padding-top: 13px; }

.card-icon-wrapper {
    position      : relative;
    height        : 21px;
    padding       : 18px 0 33px;
    color         : rgba(170, 170, 170, .8);

    &:before,
    &:after {
        content    : "";
        position   : absolute;
        top        : 28px;
        left       : 0;
        width      : 40%;
        height     : 1px;
        border-top : 2px solid #f6f6f6;
    }

    &:after {
        right : 0;
        left  : auto;
    }
}

.card-chart-wrapper {
    position : absolute;
    bottom   : 0;
    overflow : hidden;

    &.meter-chart .pillow-gauge { margin-top: 20px; }
    &.gauge-chart .pillow-gauge { margin-top: 25px; }

    &.filmstrip-chart {
        bottom : 20px;
        height : 80px;
    }

    .pillow-gauge-max-label { font-family: @main-font-regular; }

    &.gauge-chart .pillow-gauge-caption {
        font-family    : @main-font;
        font-size      : 42px;
        letter-spacing : -1.8px;

        .label { display: none; }
        .value { font-size: 42px !important; } /* override size specifics in pillow */

        .unit  {
            display     : inline;
            float       : none;
            margin-left : 3px;
            padding     : 0;
            line-height : 0.6em;
            font-size   : 0.6em;
        }
    }
}

.card-icon {
    width  : 26px;
    height : 23px;
}

// Sizes
.card-w180 {
    width: 180px;

    .card-chart-wrapper { width: 180px; }

    .card-chart-wrapper.filmstrip-chart {
        width       : 140px;
        margin-left : 20px;
    }
}

.card-w220 {
    width: 220px;

    .card-chart-wrapper { width: 220px; }

    .card-chart-wrapper.filmstrip-chart {
        width       : 145px;
        margin-left : 40px;
    }
}

.card-h260 {
    height: 260px;

    .card-chart-wrapper.gauge-chart { height: 172px; }
    .card-chart-wrapper.meter-chart { height: 116px; }
}

// Animations
.card-animations {
    @duration : 0.25s;

    // In an ideal world we would apply the overflow hidden to base .card class
    // but this would screw up tooltips in our case
    .card-animations-icon-wrapper { overflow: hidden; }

    .card-icon-wrapper  { transition: margin-top    @duration @timing-fn-spring; }
    .card-chart-wrapper { transition: margin-bottom @duration @timing-fn-spring; }

    .card-secondary-metric {
        transition  : all @duration @timing-fn-spring;
        box-sizing  : border-box;
        line-height : 2px;

        .title-metric,
        .title-subscript {
            .m-moz-smooth-animation-font;

            transition             : all @duration @timing-fn-spring;
            opacity                : .2;
            -webkit-font-smoothing : antialiased;
        }
    }

    &:hover {
        .card-icon-wrapper  { margin-top    : -60px; }
        .card-chart-wrapper { margin-bottom : 60px; }

        .card-secondary-metric {
            visibility  : visible;
            height      : 60px;
            padding-top : 13px;
        }

        .card-secondary-metric {
            .title-metric {
                margin-bottom : 5px;
                opacity       : 1;
            }

            .title-subscript { opacity: 1; }
        }
    }
}