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

.container {
  --arrow-size: #{spacing.$spacing-1};
  --arrow-side-factor: 1.1;

  position: absolute;
  bottom: 0;
  left: calc(50% - calc(var(--arrow-size) / var(--arrow-side-factor)));
  transform: translate(0, 100%);
  display: flex;
  flex-flow: column;
  padding-top: spacing.$spacing-1;

  @include container_breakpoints.container-at-least("lg") {
    --arrow-size: .4rem;
  }

  &.right {
    text-align: right;
    left: initial;
    right: calc(50% - calc(var(--arrow-size) / var(--arrow-side-factor)));
    transform: translate(0, 100%);
    align-items: flex-end;
  }

  .caret {
    width: 0; 
    height: 0; 
    border-left: calc(var(--arrow-size) / var(--arrow-side-factor)) solid transparent;
    border-right: calc(var(--arrow-size) / var(--arrow-side-factor)) solid transparent;
    border-bottom: var(--arrow-size) solid black;
  } 
  
  .label {
    color: colors.$warmgray-100;
    white-space: nowrap;
  
    @include typography.sans($size: "000", $role: "component");

    @include container_breakpoints.container-at-least("lg") {
      @include typography.sans($size: "100", $role: "component");
    }   
  }
}