@use "../../../styles/int.scss";

.superNav {
  position: relative;
  background: int.$warmgray-10;

  @include int.election-layer-zindex("nav");
}

.nav {
  --nav-color: white;
  --nav-color-transparent: #{rgba(white, 0)};

  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  flex-direction: column-reverse;
  isolation: isolate;

  @include int.election-layer-zindex("nav");

  @include int.breakpoint-at-least("sm") {
    --nav-color: #{int.$warmgray-10};
    --nav-color-transparent: #{rgba(int.$warmgray-10, 0)};

    position: sticky;
    top: 0;
    flex-direction: column;
    z-index: 2;
  }

  @include int.breakpoint-at-most("xs") {
    @include int.shadow($size: "200");
  }

  &.isSticky {
    @include int.shadow($size: "200");
  }
}

.globalNav {
  background-color: var(--nav-color);

  .isNotSticky & {
    z-index: 1;

    @include int.breakpoint-at-least("sm") {
      @include int.shadow($size: "200");
    }
  }
}

.stateNav {
  padding-top: int.$spacing-4;
  background-color: var(--nav-color);

  @include int.breakpoint-at-least("sm") {
    padding-top: int.$spacing-6;
    background-color: transparent;

    .isSticky & {
      padding-top: 0;
      background-color: var(--nav-color);
    }
  }
}

.statePaddingSpacer {
  padding-top: int.$spacing-4;

  @include int.breakpoint-at-least("sm") {
    padding-top: int.$spacing-6;
  }
}

.callFeed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0px;

  @include int.breakpoint-at-least("sm") {
    position: relative;
    height: 0px;
  }
}

.callFeedContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.eventRecirc {
  height: 75px;
  position: relative;

  @include int.is-desktop {
    height: 50px;
  }
}

.eventRecircContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}