@patreon/studio/module/components/FloatingAccessory/FloatingAccessory.module.css

Patreon Studio Design System

.root {
  --FloatingAccessory-offset: 0px;
  --FloatingAccessory-shape-multiplier: 1;

  position: relative;
  width: -moz-min-content;
  width: min-content;
}

.shapeCircle {
  /* 
    when the shape is a circle, this is the ratio of the width 
    to position the accessory away from the positioning corner.
    derived from sin((135 * PI) / 180)
  */
  /* stylelint-disable-next-line number-max-precision */
  --FloatingAccessory-shape-multiplier: 0.7071067811865476;
}

.accessoryContainer {
  --FloatingAccessory-computed-offset: calc(
    50% *
    (1 - var(--FloatingAccessory-shape-multiplier)) +
    var(--FloatingAccessory-offset)
  );

  position: absolute;
  z-index: 1;
}

.positionTopLeft .accessoryContainer {
    bottom: calc(100% - var(--FloatingAccessory-computed-offset));
    right: calc(100% - var(--FloatingAccessory-computed-offset));
  }

.positionTopRight .accessoryContainer {
    bottom: calc(100% - var(--FloatingAccessory-computed-offset));
    left: calc(100% - var(--FloatingAccessory-computed-offset));
  }

.positionBottomLeft .accessoryContainer {
    right: calc(100% - var(--FloatingAccessory-computed-offset));
    top: calc(100% - var(--FloatingAccessory-computed-offset));
  }

.positionBottomRight .accessoryContainer {
    left: calc(100% - var(--FloatingAccessory-computed-offset));
    top: calc(100% - var(--FloatingAccessory-computed-offset));
  }