/*!
 * Copyright 2017 Banco Bilbao Vizcaya Argentaria, S.A.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

* {
    transition: fill-opacity 0.3s ease-in-out, fill 0.3s ease-in-out, display 0.3s ease-in-out;
}

html {
    font-size: $default-size;
}

body {
    background-color: $background-color;
    color: $text-color;
    font-family: $font-body;
    font-weight: $font-weight;
    font-size: 14px;
}

b,
strong {
    font-weight: $font-weight-bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: $headers-color;
    font-weight: $headers-weight;
    text-align: center;
}

h2 {
    font-size: 2.5rem;
    line-height: 1em;
    margin-top: 0;
}

h3 {
    font-size: 1.5rem;
}

a {
    color: $blue;

    &:hover,
    &:focus {
        color: darken($blue, 30);
    }
}

//LAYOUT

#unsupported-msg {
    margin-top: 200px;
    font-weight: 400;
}

.bottom {
    flex: 0 0 auto;
    width: 100%;

    .tile,
    .notification {
        background-color: transparent;
        width: 100%;
        overflow: visible;
    }
}

tile-container {
    display: block;
    margin: 5px 10px;
    padding: 5px 10px;
}

.tile {
    .subtile {
        background-color: $subtile-background-color;
    }
}

@media all and (min-width: $l) {
    html {
        font-size: $default-size - 0.2;
    }
    body {
        overflow: hidden;
        height: 100%;
    }

    h2 {
        font-size: $level-2;
    }
    h3 {
        font-size: $level-3;
        margin-top: 25px;
    }

    //LAYOUT
    .main-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100vh;
    }

    .dashboard {
        display: flex;
        height: 100vh;
        padding: 5px;

        &.with-header {
            height: calc(100vh - #{$header-height});
            height: -moz-calc(100vh - #{$header-height});
            height: -webkit-calc(100vh - #{$header-height});
        }

        &.with-footer {
            height: calc(100vh - #{$footer-height});
            height: -moz-calc(100vh - #{$footer-height});
            height: -webkit-calc(100vh - #{$footer-height});
        }

        &.with-header {
            &.with-footer {
                height: calc(100vh - #{$header-footer-height});
                height: -moz-calc(100vh - #{$header-footer-height});
                height: -webkit-calc(100vh - #{$header-footer-height});
            }
        }
    }

    board-column {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 0; /* min-height to prevent overflowing */

        // Alerts column
        &[data-size="fixed-right"] {
            max-width: $alerts-column-width;
            overflow: hidden;
        }

        &[data-count-y="4"] {
            tile-container {
                min-height: 20%;
            }
        }
    }

    board-row {
        display: flex;
        flex-basis: auto;
        width: 100%;
        min-height: 0; /* min-height to prevent overflowing */

        &[data-size="l"],
        &[data-size="fixed-right"] {
            flex-grow: 1;
        }
    }

    //TILES

    tile-container {
        margin: 0;
        padding: 5px;
        width: 100%;
    }

    .bottom {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media all and (min-width: $xl) {
    html {
        font-size: $default-size - 0.2;
    }
}

@media all and (min-width: $xxl) {
    html {
        font-size: $default-size;
    }

    .dashboard {
        &.with-footer {
            height: calc(100vh - #{$header-footer-height-xxl});
            height: -moz-calc(100vh - #{$header-footer-height-xxl});
            height: -webkit-calc(100vh - #{$header-footer-height-xxl});
        }
    }

    // Alerts
    board-column[data-alerts] {
        max-width: $alerts-column-width-xl;
    }
}

/* Bootstrap overwrites */
.dropdown-menu > li > a {
    font-weight: $font-weight-medium;
}

.easter-egg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    pointer-events: none;
    display: none;
}

.header {
    width: 100%;
}

.subheader {
    flex: 1 1 auto;
}
