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

.container {
  position: absolute;
  top: 0;
  transform: translate(0, -50%) rotate(var(--rotate, 0));
  color: white;
  border: .1rem solid white;
  padding: 0 int.$spacing-1;
  gap: int.$spacing-2;
  display: flex;
  align-items: center;
  

  @include int.sans($size: "100", $weight: "bold");

  @include int.container-at-least("xl") {
    padding: int.$spacing-1 int.$spacing-2;
    gap: int.$spacing-1;

    @include int.sans($size: "200", $weight: "bold");
  }

  @include  int.container-at-least("xxl") {
    @include int.sans($size: "300", $weight: "bold");

  }
  
  &.dem {
    --rotate: -2deg;

    left: int.$spacing-2;
  }

  &.gop {
    --rotate: 2deg;

    right: int.$spacing-2;
  }
}