@use "import/variables";
@use "base";
@use "components/_index";

// fix: since vite is not rewriting a css url, if we have nested imports, we have to define the url here atm
.app-toolbar .branding-container { background-image: url("../images/enhavo_white.svg"); }

.app {padding-top: variables.$toolbarHeight;
  .checkbox-container {@extend %checkboxContainer;}
}

.navigation {
  background-color: greenyellow; height: 3000px; width: 100%;
}

.content {
  background-color: yellow; height: 2000px; width: 100%;
}

.preview {
  background-color: blue; height: 100px; width: 100%;
}

.bar {
  background-color: green; height: 100%; width: 100%;
}

.btn {@extend %btn-primary;}

.overlay-stack {position:absolute;top:0;left:0;width:100%;z-index: 1000;
  .overlay-view {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;
    &.loading {
      .loading-icon {font-size:60px;position:relative;top:40%;color:#fff;cursor:default;}
    }
    .overlay-background {position:absolute;top:0;left:0;width:100%;height:100%;background:#072129;opacity:0.8;z-index:1}
    .overlay-content {position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;overflow-y: initial;display: block !important;
      .container {margin: 50px auto 0 auto; padding-top: 10px; padding-bottom: 10px; border-radius: 2px;}
    }
    .overlay-loading {position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;text-align:center;display:none;
      .loading-icon {font-size:60px;position:relative;top:40%;color:#fff;cursor:default;}
    }
  }
}