// http://ionicframework.com/docs/v2/theming/


// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

@keyframes blink-checkered-flag {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    40%  { opacity: 0; }
    60%  { opacity: 1; }
    80%  { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes blink-yellow-flag {
   0%   { color: yellow; }
   50%  { color: #444; }
   100% { color: yellow; }
}

@media (orientation: portrait) {
    leaderboard {
        font-size: 3vw;
    }
    .race-control {
        font-size: 9vw;
    }
}

@media (orientation: landscape) {
    leaderboard {
        font-size: 2.5vw;
    }
    .race-control {
        font-size: 6vw;
    }
}

svg {
    /* Android 4.4 */
    max-height: 100%;
    max-width: 100%;
}

ion-title {
    checkerboard {
        animation-name: blink-checkered-flag;
        animation-duration: 3s;
        vertical-align: -0.2em;
    }
}

/* TODO: proper component? */
ion-toolbar.race-control {
    .toolbar-background-md {
        background-color: inherit !important;
    }
    button {
        background-color: inherit !important;
        font-size: inherit;
        height: auto !important;
        vertical-align: inherit !important;
        svg {
            padding: 6px;
            border-radius: 8px;
            background-color: inherit;
            box-shadow: 0 0 2px #444, inset 0 0 2px #666;
            fill: currentColor;
            height: 1em;
        }
    }
}

/* TODO: make this an ion-button? */
button.startlight {
    white-space: nowrap;
}

ion-grid.tuning {
    font-size: 1.8rem;
    padding-top: 2px;
    ion-col {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0.8em 0.5em;
    }
    ion-col.number {
        flex: 0 0 3em;
    }
    ion-col.code {
        flex: 0 0 4em;
    }
    ion-col.name {
        flex: 0 0 8em;
    }
    ion-col.range {
        flex: 1 1;
        padding: 0 1em;
    }
}

dot-matrix {
    color: #444;
}

dot-matrix.yellow-flag {
    color: yellow;
    animation-name: blink-yellow-flag;
    animation-iteration-count: infinite;
    animation-duration: 1s;
}

/* FIXME: is this really such a smart idea? */
ion-input[type=number] {
    input {
        text-align: right;
        &:focus {
            text-align: left;
        }
    }
}

/* FIXME: theming? */
ion-modal {
    ion-content {
        background: color($colors, dark) !important;
    }
}
ion-menu {
    ion-content {
        background: color($colors, dark) !important;
        ion-item-group + ion-item-group {
            border-top: 1px solid $list-md-border-color;
        }
        .item {
            border-width: 0 !important;
        }
        .item-inner {
            border-width: 0 !important;
        }
    }
}
ion-popover {
    ion-item-group + ion-item-group {
        border-top: 1px solid $list-md-border-color;
    }
    .item {
        border-width: 0 !important;
    }
    .item-inner {
        border-width: 0 !important;
    }
}

/* FIXME: theming support for "pristine" knob? */
ion-range.range-md.pristine {
    .range-knob {
        border: 2px solid $range-md-bar-background-color !important;
        background: $background-md-color !important;
    }
}

/* FIXME: ion-slides theming support? */
.swiper-slide {
    align-items: inherit !important;
}
.swiper-pagination-bullet {
    background: lightgray;
}

/* FIXME: need to hide scrollbars on Android 4.4? */
::-webkit-scrollbar {
    display: none;
}
