@import './animations';

.ns-root {
    --fontScale: 1;
    --colorPrimary: #29B6F6;
    --colorOnPrimary: #ffffff;
    --colorPrimaryContainer: #C6E7FF;
    --colorOnPrimaryContainer: #001E2D;
    --colorSecondary: #4F616D;
    --colorOnSecondary: #FFFFFF;
    --colorSecondaryContainer: #D2E5F4;
    --colorOnSecondaryContainer: #0A1D28;
    --colorTertiary: #62597C;
    --colorOnTertiary: #FFFFFF;
    --colorTertiaryContainer: #E8DEFF;
    --colorOnTertiaryContainer: #1E1735;
    --colorBackground: #FCFCFF;
    --colorOnBackground: #191C1E;
    --colorError: #BA1A1A;
    --colorOnError: #FFFFFF;
    --colorErrorContainer: #FFDAD6;
    --colorOutline: #71787E;
    --colorOutlineVariant: #C1C7CE;
    --colorOnSurfaceDisabled: #00000055;
    --colorSurfaceVariant: #DDE3EA;
    --colorOnSurfaceVariant: #41484D;
    --colorSurface: #FCFCFF;
    --colorSurfaceTint: #00658D;
    --colorOnSurface: #191C1E;
    --colorOnSurfaceInverse: #000000;
    --colorSurfaceContainer: #C2C9BD;
    --popupMenuBackground: #C2C9BD;

    --mdiFontFamily: #{$mdiFontFamily};
    --appFontFamily: #{$appFontFamily};

    --actionBarButtonHeight: 50;
    --actionBarHeight: 60;
}

%mdi {
    font-family: var(--mdiFontFamily);
}

%alpimaps {
    font-family: var(--appFontFamily);
}

%icon-btn {
    color: var(--colorPrimary);
    ripple-color: var(--colorPrimary);

    width: var(--actionBarButtonHeight);
    height: var(--actionBarButtonHeight);
    font-size: 24;
}

.mdi {
    @extend %mdi;
}

.alpimaps {
    @extend %alpimaps;
}

mdslider {
    track-background-color: #aaaaaa88;
}

mdtextfield[variant=outline],
mdtextfield[variant=fill] {
    color: var(--colorOnSurface);
    stroke-color: var(--colorOutline);
    placeholder-color: var(--colorOutline);
    floating-color: var(--colorOutline);
    floating-inactive-color: var(--colorOutline);
}

.directionsPanel {
    background-color: var(--colorPrimary);

    .ns-eink & {
        background-color: white;
        border-bottom-width: 1;
        border-bottom-color: black;
    }
}

checkbox {
    margin-left: 10;
    color: var(--colorOnSurface);
    fill-color: var(--colorPrimary);
}

frame {
    background-color: var(--colorBackground);
}

// page {
//     status-bar-style: dark;
//     background-color: var(--colorBackground);
//     status-bar-color: var(--colorBackground);

//     .ns-eink & {
//         status-bar-style: light;
//     }
// }

.themedPage {
    status-bar-color: var(--colorPrimary);
    status-bar-style: dark;

    .ns-eink & {
        status-bar-style: light;
        status-bar-color: white;
    }
}


page {
    status-bar-style: light;
    background-color: var(--colorBackground);
    status-bar-color: var(--colorBackground);

    .ns-dark &,
    &.ns-dark,
    .ns-black &,
    &.ns-black {
        status-bar-style: dark;
    }

    .ns-eink & {
        status-bar-style: light;
    }
}

htmllabel,
canvaslabel,
label {
    color: var(--colorOnBackground);
}

.textRipple {
    ripple-color: var(--colorOnBackground);
}

.sectionHeader {
    font-size: 15;
    font-weight: bold;
    color: var(--colorPrimary);
    padding: 5 5 5 16;
}

.buttonthemed {
    background-color: var(--colorPrimary);
    color: var(--colorOnPrimary);
    ripple-color: var(--colorOnPrimary);

    .ns-eink & {
        color: white;
        background-color: black;
    }
}

.buttontext {
    background-color: var(--colorBackground);
    color: var(--colorPrimary);
    ripple-color: var(--colorPrimary);

    .ns-eink & {
        background-color: #ffffff66;
        color: black;
    }
}

.maki {
    font-family: 'maki';
}

.osm {
    font-family: 'osm';
}

.small-icon-btn {
    @extend %mdi;
    @extend %icon-btn;
    width: 30;
    height: 30;
    font-size: 16;
}

.icon-btn-white {
    @extend %mdi;
    @extend %icon-btn;
    color: var(--colorOnPrimary);
    ripple-color: var(--colorOnPrimary);
}

.icon-btn-text {
    @extend %mdi;
    @extend %icon-btn;
    color: var(--colorPrimary);
    ripple-color: var(--colorPrimary);
}

.icon-btn-text[isEnabled='false'] {
    background-color: lightGray;
    color: gray;
}

.floating-btn {
    @extend %mdi;
    shape: medium;
    elevation: 6;
    font-size: 24;
    padding: 0;
    margin: 8;
    width: 54;
    height: 54;

    .ns-eink & {
        elevation: 0;
        border-color: black;
        border-width: 1;
    }
}

.floating-btn-themed {
    @extend .floating-btn;
    background-color: var(--colorPrimaryContainer);
    ripple-color: var(--colorPrimaryContainer);
    color: var(--colorOnPrimaryContainer);

    .ns-eink & {
        elevation: 0;
        border-color: black;
        border-width: 1;
        background-color: #ffffff66;
    }

}

.small-floating-btn {
    @extend %mdi;
    @extend .buttontext;
    shape: small;
    elevation: 3;
    dynamic-elevation-offset: 3;
    font-size: 24;
    padding: 0;
    width: 40;
    height: 40;
    margin: 8;

    .ns-eink & {
        elevation: 0;
        border-color: black;
        border-width: 1;
        background-color: #ffffff66;
    }
}

.btn-themed {
    background-color: var(--colorPrimaryContainer);
    ripple-color: var(--colorPrimaryContainer);
    color: var(--colorOnPrimaryContainer);

    .ns-eink & {
        elevation: 0;
        border-color: black;
        border-width: 1;
    }

}

.section-title {
    font-size: 10;
}

.actionBar {
    background-color: var(--colorPrimary);

    &:transparent {
        background-color: transparent;
    }

    .ns-eink & {
        background-color: white;
    }
}

.actionBarButton {
    @extend .mdi;
    width: var(--actionBarButtonHeight);
    height: var(--actionBarButtonHeight);
    color: var(--colorOnPrimary);
    margin: 0;
    padding: 0;
    font-size: 24;

    &:transparent {
        color: var(--colorOnSurface);
    }

    .ns-eink & {
        color: var(--colorOnSurface);
    }
}

.actionBarTitle {
    font-size: 20;
    font-weight: 500;

    color: var(--colorOnPrimary);

    &:transparent {
        color: var(--colorOnSurface);
    }

    .ns-eink & {
        color: var(--colorOnSurface);
    }
}

.actionBarSubtitle {
    font-size: 13;
    color: var(--colorOnPrimary);

    &:transparent {
        color: var(--colorOnSurface);
    }

    .ns-eink & {
        color: var(--colorOnSurface);
    }
}

.icon-btn {
    @extend %mdi;
    @extend %icon-btn;
}

.icon-label {
    @extend %mdi;
    @extend %icon-btn;
    text-align: center;
    vertical-text-alignment: center;
}

.cardview {
    border-radius: 12;
    background-color: var(--colorSurface);
    border-color: var(--colorOutline);
    border-width: 1;
}

.transitIconLabel {
    border-radius: 4;
    font-weight: bold;
    font-size: 20;
    padding: 5 4 5 4;
    text-align: center;
    vertical-text-alignment: center;
    vertical-alignment: center;
}

.itemEditButton {
    text-wrap: true;
    background-color: var(--colorBackground);
    border-color: var(--colorOnSurfaceVariant);
    border-radius: 4;
    border-width: 1;
    elevation: 2;
    height: 50;
    margin: 0 4 0 4;
    text-align: center;
    vertical-text-alignment: middle;
    width: 50;
}