@use "../variables" as v;
@use "./animations";

.nav {
  z-index: 98;
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: rgba($color: v.$pm2, $alpha: 0.2);
  border-bottom: 1px solid v.$pm1;
  border-left: 1px solid v.$pm1;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: nav_in 0.5s;
  .btn-menu {
    padding: 10px 20px;
    margin-left: auto;
    margin-right: 0;
    width: fit-content;
  }
  .nav-list {
    display: none;
    padding: 10px;
    a {
      display: block;
      text-align: left;
      padding: 10px;
      text-decoration: none;
      font-size: 1.1em;
      color: v.$white;
      border-left: 1px solid #00000000;
      border-bottom: 1px solid #00000000;
      border-radius: 10px;
      transition: 0.2s;
      &.br {
        margin-top: 20px;
      }
      &:hover {
        width: calc(100% + 20px);
        transform: translateX(-20px);
        background-color: v.$px1;
        border-color: v.$pm1;
      }
      &:active {
        background-color: v.$pm1;
        color: v.$px1;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  &.opened {
    min-width: 200px;
    .btn-menu {
      border-radius: 10px;
      &:active {
        background-color: v.$pm1;
      }
    }
    .nav-list {
      display: block;
    }
  }
  &.out {
    animation: nav_out 0.5s forwards;
  }
}
