// http://ionicframework.com/docs/theming/
@import '~@ionic/angular/css/core.css';
@import '~@ionic/angular/css/normalize.css';
@import '~@ionic/angular/css/structure.css';
@import '~@ionic/angular/css/typography.css';
@import '~@ionic/angular/css/display.css';
@import '~@ionic/angular/css/padding.css';
@import '~@ionic/angular/css/float-elements.css';
@import '~@ionic/angular/css/text-alignment.css';
@import '~@ionic/angular/css/text-transformation.css';
@import '~@ionic/angular/css/flex-utils.css';

ion-badge.tuning {
    width: 2em !important;
}

/* no highlighting, border ("lines") color? */
ion-item {
    --highlight-height: 0;
    /*--border-color: var(--ion-text-color);*/
}

/* make list headers stand apart */
ion-list-header {
    --color: var(--ion-color-primary);
}

/* make slides fill available space */
ion-slides {
    --bullet-background: var(--ion-color-step-500) !important;
    --bullet-background-active: var(--ion-color-step-700) !important;
    height: 100%;
    ion-slide {
        align-items: flex-start !important;
    }
}

/* make item groups stand apart in menus */
ion-menu {
    ion-item-group + ion-item-group {
        border-top: 1px solid /*$list-md-border-color*/;
    }
}

/* indicate "pristine" range values (tuning only?) */
ion-range.pristine {
    --knob-size: 0;
}

/* right-aligned input when not editing (is this really such a smart idea?) */
ion-input.right-align {
    :not(.has-focus) {
        text-align: right;
    }
}

/* checkered flag blinking in title (only) */
@keyframes blink-checkered-flag {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    40%  { opacity: 0; }
    60%  { opacity: 1; }
    80%  { opacity: 0; }
    100% { opacity: 1; }
}

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