@use "../../../../../styles/typography.scss";
@use "../../../../../styles/colors.scss";
@use "../../../../../styles/container_breakpoints.scss";
@use "../../../../../styles/spacing.scss";

.container {
  --border-size: calc(#{spacing.$spacing-1} / 4);
  --border-color: white;

  position: absolute;
  top: 0;
  transform: translate(0, -100%);
  color: colors.$warmgray-100;
  white-space: nowrap;
  filter: drop-shadow(var(--border-size) 0 var(--border-color) ) 
    drop-shadow(calc(-1 * var(--border-size)) 0 var(--border-color)) 
    drop-shadow(0 var(--border-size) var(--border-color)) 
    drop-shadow(0 calc(-1 * var(--border-size)) var(--border-color));  
  pointer-events: none;

  @include typography.sans($size: "000", $role: "component");

  @include container_breakpoints.container-at-least("lg") {
    padding-bottom: spacing.$spacing-1;

    @include typography.sans($size: "100", $role: "component");
  }   

  @include container_breakpoints.container-at-least("xl") {
    left: 50%;
    transform: translate(-50%, -100%);
  }

  &.right {
    right: 0;
  }
}