@import 'notes';
@import 'todo';
@import 'apps';
@import 'scss/variables';

.navbar {
  display: flex;
  flex-flow: row;
  gap: 10px;
  animation: fadeIn 2s;

  button {
    -webkit-font-smoothing: subpixel-antialiased;

    /* filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); */
    cursor: pointer;

    // transition: 0.2s ease;
    margin-top: 0;

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    /* &:hover {
      color: map-get($theme-colours, 'main-text-color');
      transform: translateZ(0);
      transform: scale(1.3);
    } */
  }
}

.old {
  button.navbarButton {
    @include basicIconButton(12px, 1.2rem, legacy);
  }
}

.new {
  button.navbarButton {
    @include basicIconButton(12px, 1.2rem, ui);
  }
}

.navbar-hover {
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 500px;

  .navbar {
    opacity: 0;
    transition:
      visibility 0.2s linear,
      opacity 0.2s linear;
    visibility: hidden;
  }

  &:hover {
    .navbar {
      opacity: 1;
      visibility: visible;
    }
  }
}

.navbar-container {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-flow: column;
}

.appsmodal {
  width: fit-content;
  padding: 5px;
  border-radius: 1em;

  @include themed {
    background: t($modal-sidebarActive);
  }
}
