@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);
  }
}

.navbarButtonOptions {
  display: flex;
  flex-flow: row;
  gap: 10px;
  .navbarButtonOption {
    .subtitle {
      font-size: 12px;
    }
    svg {
      background: linear-gradient(238.7deg, #ff5c25 13.8%, #d21a11 49.49%, #ff456e 87.48%);
      padding: 5px;
      border-radius: 100%;
    }
    width: 70px;
    height: 70px;
    padding: 5px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    @include themed {
      border-radius: t($borderRadius);
      box-shadow: 0 0 0 1px t($color);
    }
  }
  .disabled {
    @include themed {
      background: t($modal-sidebar);
      box-shadow: 0 0 0 1px t($modal-sidebarActive);

      &:hover {
        background: t($modal-sidebarActive);
      }
    }
    svg {
      @include themed {
        background-image: t($slightGradient);
        box-shadow: t($boxShadow);
      }
    }
  }
}