@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;
      padding: spacer(2);
      z-index: z(2);

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

      &.active {
        background-color: color(background);
      }
    }

    .button:is(.logo) {
      color: color(text);

      &.active {
        color: color(text);
      }
    }

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

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

      &:is(.logo) {
        background-color: color(background);
      }
    }
  }
}