/* Helper Classes */

.default {
  margin: 0;
  padding: 0;
  background-color: $toplevel-background;
  color: $grey8;
}

.default-link {
  text-decoration: none;

  &:link,
  &:visited {
    color: $link-color;
  }

  &:hover,
  &:active {
    color: $link-hover-color;
  }
}

.tooltip {
  width: 40ch;
  font-size: 0.6rem;
  color: $blue;
  text-align: left;
}

@mixin font-awesome($content) {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: $content;
}

.parameter-btn {
  font-size: 75%;

  &.allowed {
    &:hover {
      color: $green;
      cursor: pointer;
    }
  }

  &.disallowed {
    color: lighten($black3, 20%);

    &:hover {
      &:after {
        @extend .tooltip;
        content: attr(title);
        position: absolute;
        left: calc(100% + 10px);
        color: lighten($red, 15%);
      }
    }
  }

  &.info {
    color: lighten($black3, 20%);

    &:hover {
      &:after {
        @extend .tooltip;
        content: attr(title);
        position: absolute;
        left: 0;
        top: -20px;
      }
    }
  }
}

/* Mixins */

@mixin border-radius-bottom($radius) {
  border-bottom-left-radius: $radius;
  border-bottom-right-radius: $radius;
}

@mixin border-radius-top($radius) {
  border-top-left-radius: $radius;
  border-top-right-radius: $radius;
}

/* Body */

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
  border-radius: 7px;
  background-color: $grey2;
}

::selection {
  background-color: $highlight-color;
  /* WebKit/Blink Browsers */
}

body {
  @extend .default;
  // Adding this in hopes of fixing the chrome scroll back bug
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
}

#app {
  background: $canvas-background;
  /* The app should take up the whole screen with no scrollbars */
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                supported by Chrome and Opera */
}

/* Body */

body {
  a {
    &,
    &:link,
    &:visited {
      color: $blue;
    }

    &:hover,
    &:active {
      color: $purple;
    }
  }
}

body #app * {
  &:not(.fa) {
    // skip fontawesome
    font-family: "Fira Mono", monospace;
  }

  i.di {
    @extend .dark-icon-font;
  }
}

#canvas {
  display: block;
  /* The canvas has no size,
   * but we want all its children to be visible.
   * The canvas will translate as you pan. */
  overflow: visible;
  transform-origin: top left;

  .node {
    position: absolute;
    display: flex;
    align-items: flex-start;
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  height: 100vh;
  width: 100vw;
  overflow: visible;
  background-color: rgba(72, 72, 72, 0.75);

  &.show {
    display: block;
  }
}

.toast {
  background: $black3;
  opacity: 0;

  padding: 8px;
  font-size: 10px;
  color: $pink;

  position: fixed;
  top: 10px;
  left: calc(50% - 55px);

  &.show {
    animation: 2s linear forwards showToast;
  }
}

.logged-out {
  margin: auto;
  width: 500px;
  text-align: center;
}
