@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i);

@import "../../../global/theme/theme";
//@import "../../../global/theme/theme-diap";

body {
  background: var(--ema-background) !important;
  color: var(--ema-color) !important;
}

ema-app-root {

  font-family: $font-default;
  color: $gray-700;

  h4, h5 {
    //font-weight: bold;
  }

  header {
    nav {
      background: var(--ema-background-primary, $background-primary);
      border-bottom: $border-default;
    }
    ion-icon {
      margin-top: -$padding/3;
      margin-right: $padding/2;
    }
  }
  main {
    margin-top: $header-height;
  }

  // disable selection outlines ?
  *:focus { outline:none }

  //:not(input):not(textarea),
  //:not(input):not(textarea)::after,
  //:not(input):not(textarea)::before {
  //  -webkit-user-select: none;
  //  user-select: none;
  //  cursor: default;
  //}
  //input, button, textarea, :focus {
  //  outline: none; // You should add some other style for :focus to help UX/a11y
  //}
  //*:focus {
  //  outline: none; // You should add some other style for :focus to help UX/a11y
  //}

  #loading-spinner {
    margin-top: $padding*5;
  }

  // BOOTSTRAP-4 COMPONENTS
  .card {
    border: $border-default;
  }

  .jumbotron {
    background: var(--ema-background-primary, $background-primary);
    margin-left: -$padding;
    margin-right: -$padding;
  }

  .navbar {
    padding: 0 1rem;
    .nav-link {
      padding: $padding 1rem;
      cursor: pointer;
    }
  }
  .navbar.fixed-top {
    min-height: $header-height;
    border-bottom: $border-default;
    .navbar-header, .navbar-nav {
      //background-color: var(--ema-background, $background);
    }
  }
  .navbar.fixed-bottom {
    border-top: $border-default;
    align-content: center;
    //.navbar-nav {
    //  //margin: 0 auto;
    //}
  }
  .navbar.fixed-top, .navbar.fixed-bottom {
    background-color: var(--ema-background, $background);

    .navbar-brand {
      margin-top: 0;
      font-size: 18px;
      font-weight: bold; }

    .nav-item {
      //border-right: $border-default;
      padding: $padding;
      //padding-right: $padding;
      a span {
        color: $gray-700;
      }
      .fas {
        color: $gray-700;
        margin-right: $padding/2;
      }
      //.icon {
      //  color: $primary;
      //  font-size: $icon-size;
      //  margin-top: $padding*0.75;
      //  position: absolute;
      //}
      //span{
      //  padding-left:$padding*2.4
      //}
    }
    .nav-item:first-child{
      //border-left: $border-default;
    }
    .nav-item.active{
      //border-left: $border-default;
      //border-right: $border-default;
    }
    .navbar-toggler{
      border: none;
      font-size: 190%;
      color: #5e5e5e;
      margin-top: 2px;
      margin-left: $padding/2;
      margin-bottom: -4px;
      z-index: 2000;
    }
    .navbar-toggler-icon {
      background-image: url("/assets/icon/icon-hamburger.svg");
      margin-top: -$padding/4;
      position: fixed;
      top: $padding/2;
      right: $padding/2;
      z-index: 11000;
    }
    .navbar-toggler.collapsed{
      color: #808080;
      rotation: $icon-size;}
    .navbar-collapse .open{
      max-width: 50%;}
    .nav .open > .nav-link, .nav .open > .nav-link:hover, .nav .open > .nav-link:focus {
      border-right: none;
      li a{
        background-color: var(--ema-background, $background); }
    }
    //.dropdown{
    //  padding: $padding/2 $padding/2 10px 20px;
    //  padding-bottom: 5px;
    //  position:fixed;
    //  top: 0;
    //  right: 0;
    //  list-style:none;
    //  .dropdown-toggle{
    //    padding-top: 10px;
    //    height: 52px;
    //    font-size: $icon-size;}
    //  .dropdown-menu {
    //    left: inherit;
    //    right: 0;
    //    > li > a:hover{
    //      background-color: var(--ema-background, $background);}
    //  }
    //}

    // collapsed mobile navbar
    @media screen and (max-width: 767px) {
      .navbar-header{
        border-bottom: $border-default;
      }
      .navbar-collapse{
        background-color: $gray-300;
        box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.33);
        //max-width:90%;
        margin-top: $padding*1.15;
      }
      .nav-item {
        border-left: $border-default;
        border-bottom: $border-default;
        border-right: $border-default;
        .icon{
          margin-top: $padding*0.55;
        }
      }
      .nav-item:first-child{
        border-top: $border-default;
      }
      .nav-item:last-child{
        border-bottom: none;
      }
      //.navbar-brand{
      //  padding-right: $padding*3; }
    }
  }

  .navbar-inverse{
    background: $black;
    color: $white;
  }

  // util
  .visible {
    display: block;
  }
  .hidden {
    display: none;
  }

}