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

// TODO: Have a better way of setting the `top` values based on the nav height

.container {
  position: sticky;
  top: int.$spacing-2;
  height: 0;
  width: 100%;
  max-width: calc(var(--Well-content-max-width) + 300px);
  margin: auto;

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

  @include int.breakpoint-at-least("sm") {
    top: 82px;

    &.state {
      top: 102px;
    }
  }

  @include int.breakpoint-at-least("md") {
    transform: translate(0, -2rem) ;
    top: calc(82px + 2rem);
    padding-top: .25rem;

    &.state {
      top: calc(102px + 2rem);
    }
  }
}

.election-toggle {
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(10deg);
  transform-origin: top left;

  @include int.breakpoint-at-least("md") {
    transform: rotate(-10deg);
    transform-origin: top right;
    left: 0;
    right: unset;
  }
}

@include int.customize-component(".election-toggle") {
  .int-style.int-style-SegmentedControlGroup {
    border-radius: 100%;

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