@import "~@nativescript/theme/core";
@import "~@nativescript/theme/blue";

// Place any CSS rules you want to apply on both iOS and Android here.
// This is where the vast majority of your CSS code goes.

// Font icon class
.fab {
    font-family: "Font Awesome 5 Brands", "fa-brands-400";
    font-weight: 400;
}

.fas {
    font-family: "Font Awesome 5 Free", "fa-solid-900";
    font-weight: 900;
}

.far {
    font-family: "Font Awesome 5 Free", "fa-regular-400";
    font-weight: 400;
}

// Custom tabstrip item class
.navigation__item {
    &:active,
    &:active Label {
        @include colorize($contrasted-color: complementary background 20% 0%);
    }
}

// Common page class
.page__content {
    &-icon,
    &-placeholder {
        color: const(grey);
        font-size: 20;
        vertical-align: center;
        horizontal-align: center;
    }

    &-icon {
        font-size: 72;
        vertical-align: top;
        margin-top: 20%;
    }
}