@import "import";

.nav {
  @include flex($gap: spacer(1));
  @include outer-rounded(2, spacer(1));
  position: relative;
  padding: spacer(1);

  .tab {
    @include flex;

    .button,
    .activeRect {
      border-radius: rounded(2);
    }

    .button {
      @include transition("background-color, color");
      background-color: transparent;
      height: 1em;
      padding: spacer(2);
      z-index: z(2);

      &:hover {
        background-color: color(text-dim-1);
      }

      &.active {
        background-color: color(black-20);
        backdrop-filter: blur(30px);
      }
    }

    .button:is(.logo) {
      color: color(white);
    }

    .activeRect {
      position: absolute;
      top: 0;
      left: 0;
    }

    .activeRect {
      //background-color: color(background);
      z-index: z(1);
    }
  }
}