@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,600;0,700;1,300;1,600;1,700&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap");

ui-viewport {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  font-family: $font-family;

  .ui-viewport__leftpart {
    transition: width 0.3s ease-in-out;
    ~ .ui-viewport__header {
      width: calc(100% -$left-part-width);
      margin-left: $left-part-width;
    }
    &.condensed {
      ~ .ui-viewport__header {
        width: calc(100% -$left-part-condensed-width);
        margin-left: $left-part-condensed-width;
      }
    }
  }
  // .ui-viewport__leftpart

  .ui-viewport__header {
    flex-grow: 0;
    flex-shrink: 0;
    > .container-nav {
      height: $ui-viewport-header-height;
      line-height: initial;
    }
    header {
      z-index: 999;
    }
  }
  aside {
    margin-top: -$ui-viewport-header-height;
    height: 100vh;
  }

  .ui-viewport__body {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-direction: row;
    height: calc(100% - #{$ui-viewport-header-height});
    .ui-router-view {
      flex-grow: 1;
      flex-shrink: 1;
    }

    margin-left: $left-part-width;
    transition: margin-left 0.3s ease-in-out;

    .condensed & {
      margin-left: $left-part-condensed-width;
    }
  }
  &.show-footer .ui-viewport__body {
    height: calc(100% - #{$ui-viewport-header-height} - #{$ui-viewport-footer-height});
  }
  section[role="tablist"] {
    display: none;
  }
  .ui-viewport__footer {
    flex-shrink: 0;
    flex-grow: 0;
    height: $ui-viewport-footer-height;
    padding-left: $left-part-width;
    font-size: smaller;
    align-self: flex-end;
    margin-right: 10px;
    .condensed & {
      padding-left: $left-part-condensed-width;
    }
  }
  aside.ui-viewport__leftpart {
    background: $white;

    padding: 0;
    vertical-align: top;
    width: $left-part-width;
    -webkit-box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
    box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
    flex-wrap: 0;
    flex-shrink: 0;
    overflow: visible;
    z-index: 100;
    left: 0;
    position: fixed;
  }

  .condensed.ui-navbar-menu-hover & {
    .ui-viewport__body {
      margin-left: $left-part-condensed-width;
    }
    aside.ui-viewport__leftpart {
      width: $left-part-width;
      position: fixed;
      left: 0;
    }
  }

  .small-device & {
    .ui-viewport__body {
      margin-left: $left-part-condensed-width;
    }
  }
  .condensed & aside.ui-viewport__leftpart {
    width: $left-part-condensed-width;
  }
}

.ui-icon {
  background-size: contain;
  box-sizing: content-box;
  display: inline-block;
  fill: currentColor;
  font-size: 1em;
  height: 1em;
  line-height: 1;
  pointer-events: none;
  text-align: center;
  vertical-align: middle;
  width: 1em;

  img {
    background-size: contain;
    height: 1em;
    overflow: hidden;
    width: 1em;
  }

  path,
  ::before {
    @include transform-origin(50% 50% 0);
  }

  &--round {
    border-radius: 1em;
    height: 1em;
    max-height: 1em;
    overflow: hidden;
    width: 1em;
  }

  &.flip-on-rtl {
    @at-root [dir="rtl"] & {
      transform: scaleX(-1);
    }
  }
}

.ui-loader {
  cursor: wait;
  display: block;
  z-index: 99999;
  @include position(absolute, 0);

  > div {
    border-radius: 2px;
    font-size: 2rem;
    height: 3rem;
    line-height: 0;
    margin: auto;
    padding: 0.5rem;
    width: 3rem;
    @include position(absolute, 0);
  }
}

.ui-drop {
  display: none;
  &__body {
    @include position(fixed, 0 null null 0);
    cursor: default;
    max-height: 75vh;
    max-width: 50vw;
    min-width: 4rem;
    overflow: auto;
    pointer-events: all;
    transform: translate(0, 0);
    z-index: 1000;

    &[data-show="false"] {
      visibility: hidden;
    }
  }

  &[data-open="true"] {
    display: block;
  }
}

nav > .nav-wrapper > .brand-logo {
  margin-left: calc(#{$left-part-width} + 0.25em);
}
.condensed nav > .nav-wrapper > .brand-logo {
  margin-left: calc(#{$left-part-condensed-width} + 0.25em);
}
