@use "../../theme";

@mixin Title($size) {
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;

  &::before,
  &::after {
    font-size: $size;
    content: "🌈";
  }

  &::before {
    margin-inline-end: theme.$spacer-2xs;
  }

  &::after {
    display: inline-block;
    margin-inline-start: theme.$spacer-2xs;
    transform: rotate(90deg);
  }
}

.Title--sizeH2 {
  @include Title(theme.$fontSize-3);

  font-size: theme.$fontSize-4;
}

.Title--sizeH3 {
  @include Title(theme.$fontSize-2);

  font-size: theme.$fontSize-3;
}

.Title--sizeH4 {
  @include Title(theme.$fontSize-1);

  font-size: theme.$fontSize-2;
}

.Title--sizeH5 {
  @include Title(theme.$fontSize-0);

  font-size: theme.$fontSize-1;
}
