@import './reset.less';
@import './palette.less';
@import './fonts.less';

:root {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: 'Euclid Circular A', 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  font: 100% 'Euclid Circular A', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;

  // The color and background styles are overridden by the current theme.
  background-color: @palette__gray--light-3;
  color: @palette__gray--dark-2;
}

#loading {
  &-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 256px auto;
    grid-template-areas: 'sidebar content';
    pointer-events: none;
  }

  &-sidebar {
    grid-area: 'sidebar';
    background: @palette__gray--light-3;
  }

  &-content {
    grid-area: 'content';
    background: @palette__gray--light-3;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    background-color: @palette__black;
    color: @palette__white;
  }
  #loading {
    &-sidebar {
      background: @palette__black;
    }
    &-content {
      background: @palette__black;
    }
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#application {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  // Becomes not empty when the first render happens and the app is "ready"
  &:not(:empty) {
    background-color: inherit;
    animation-name: fadein;
    animation-duration: 0.2s;
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  }

  #statusbar {
    background-color: fade(@palette__white, 50%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1020;

    .progress {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      text-align: center;
      height: 4px;
      z-index: 2000;
      border-radius: 0;
      transition: height 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);

      .progress-bar {
        background-color: @palette__green--dark-1;
      }
    }
  }
}

* {
  user-select: text;
  -webkit-user-select: text;
  outline-color: @palette__blue--light-1;
}