_floating-ui.scss

$floating-ui-transition-offset: 5px;

@mixin floating-ui-offset-bottom {
  inset-block-start: -$floating-ui-transition-offset;
}

@mixin floating-ui-offset-top {
  inset-block-start: $floating-ui-transition-offset;
}

@mixin floating-ui-offset-left {
  /* stylelint-disable-next-line liberty/use-logical-spec -- explicit position */
  left: $floating-ui-transition-offset;
}

@mixin floating-ui-offset-right {
  /* stylelint-disable-next-line liberty/use-logical-spec -- explicit position */
  left: -$floating-ui-transition-offset;
}

@mixin floating-ui-base {
  --calcite-floating-ui-transition: var(--calcite-animation-timing);
  --calcite-floating-ui-z-index: theme("zIndex.dropdown");
}

@mixin floating-ui-anim {
  .calcite-floating-ui-anim {
    position: relative;
    transition: var(--calcite-floating-ui-transition);
    /* stylelint-disable-next-line liberty/use-logical-spec -- explicit position */
    transition-property: inset, left, opacity;
    opacity: 0;
    box-shadow: $shadow-2;
    @apply rounded z-default;
  }
}

@mixin floating-ui-anim-active {
  opacity: 1;
  inset-block-start: 0;
  /* stylelint-disable-next-line liberty/use-logical-spec -- explicit position */
  left: 0;
}

@mixin floating-ui-elem-anim($selector) {
  #{$selector} {
    @include floating-ui-anim();

    &[data-placement^="bottom"] .calcite-floating-ui-anim {
      @include floating-ui-offset-bottom();
    }

    &[data-placement^="top"] .calcite-floating-ui-anim {
      @include floating-ui-offset-top();
    }

    &[data-placement^="left"] .calcite-floating-ui-anim {
      @include floating-ui-offset-left();
    }

    &[data-placement^="right"] .calcite-floating-ui-anim {
      @include floating-ui-offset-right();
    }

    &[data-placement] .calcite-floating-ui-anim--active {
      @include floating-ui-anim-active();
    }
  }
}

@mixin floating-ui-container() {
  inline-size: max-content;
  display: none;
  inset-block-start: 0;
  /* stylelint-disable-next-line liberty/use-logical-spec -- explicit position */
  left: 0;
  z-index: var(--calcite-floating-ui-z-index);
}

@mixin floating-ui-arrow {
  .calcite-floating-ui-arrow {
    @apply -z-default
    absolute
    pointer-events-none
    fill-background-foreground-1;
  }

  .calcite-floating-ui-arrow__stroke {
    stroke: theme("borderColor.color.3");
  }
}