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

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

$font-default: 'Open Sans', sans-serif, -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

@include css-vars((
    --header-height: 50px,
    --footer-height: 57px,
    --icon-size: 190%,
    --font-default: $font-default,
))

html, body {
  height: 100%;
}

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

*:focus, button:focus, input:focus, textarea:focus {
  outline: none !important;
}

// develop only
.dev main {
  padding-top: var(--header-height);
  //ema-route-link
}

ema-app-root {

  main {
    margin-bottom: var(--footer-height);
  }

  header {
    ema-route-link a {
      padding-left: calc(var(--ema-padding) * 3);
      padding-right: calc(var(--ema-padding) * 3);
    }
  }

  footer {
    nav {
      background: var(--ema-background-light);
      border-bottom: var(--ema-border);
    }
    ion-icon {
      margin-top: -$ema-padding-md/3;
      margin-right: $ema-padding-md/2;
    }
    .navbar.fixed-bottom .navbar-toggler-icon {
      //margin-top: -0.25rem;
      top: inherit;
      bottom: 0.1rem;
      right: 0.5rem;
    }
  }

  // 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: $ema-padding-md*5;
  }

  // BOOTSTRAP-4 COMPONENTS
  .card {
    border: var(--ema-border);
  }

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

  .navbar {
    padding: 0 1rem;
    .nav-link {
      padding: $ema-padding-md 1rem;
      cursor: pointer;
    }
  }
  .navbar.fixed-top {
    min-height: var(--header-height);
    border-bottom: var(--ema-border);
    .navbar-header, .navbar-nav {

    }
  }
  .navbar.fixed-bottom {
    border-top: $ema-border;
    align-content: center;
    //.navbar-nav {
    //  //margin: 0 auto;
    //}
  }
  .navbar.fixed-top, .navbar.fixed-bottom {
    background-color: var(--ema-background, white);

    .navbar-brand {
      color: inherit;
      margin-top: -3px;
      font-size: 18px;
      font-weight: bold; }
    #logo {
      margin-top: 2px;
    }

    .nav-item {
      //border-right: $ema-border;
      padding: $ema-padding-md;
      //padding-right: $ema-padding-md;
      a span {
        color: $gray-700;
      }
      .fas {
        color: $gray-700;
        margin-right: $ema-padding-md/2;
      }
      //.icon {
      //  color: $ema-primary;
      //  font-size: $icon-size;
      //  margin-top: $ema-padding-md*0.75;
      //  position: absolute;
      //}
      //span{
      //  padding-left:$ema-padding-md*2.4
      //}
    }
    .nav-item:first-child{
      //border-left: $ema-border;
    }
    .nav-item.active{
      //border-left: $ema-border;
      //border-right: $ema-border;
    }
    .navbar-toggler{
      border: none;
      font-size: 190%;
      color: #5e5e5e;
      margin-top: 2px;
      margin-left: $ema-padding-md/2;
      margin-bottom: -4px;
      z-index: 2000;
    }
    .navbar-toggler-icon {
      background-image: url("/assets/icon/icon-hamburger.svg");
      margin-top: -$ema-padding-md/4;
      position: fixed;
      top: $ema-padding-md/2;
      right: $ema-padding-md/2;
      z-index: 11000;
    }
    .navbar-toggler.collapsed{
      color: #808080;
      rotation: var(--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, white); }
    }
    //.dropdown{
    //  padding: $ema-padding-md/2 $ema-padding-md/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, white);}
    //  }
    //}

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

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

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

}
