@layer components {

  .ui-float-button {
    position: fixed;
    z-index: var(--overlay-z-index);
    inset-block-end: var(--float-button-offset-block-end);
    inset-inline-end: var(--float-button-offset-inline-end);
    box-shadow: var(--float-button-shadow);
  }

  .ui-float-button-group .ui-float-button {
    position: relative;
    inset: auto;
    pointer-events: auto;
  }

  .ui-float-button[data-shape="square"] {
    display: flex;
    flex-direction: column;
    block-size: auto;
    inline-size: var(--float-button-size);
    min-block-size: var(--float-button-min-block-size);
    padding-block: var(--float-button-padding-block);
    padding-inline: var(--float-button-padding-inline);
  }

  .ui-float-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .ui-float-button-icon > svg {
    inline-size: var(--float-button-icon-size);
    block-size: var(--float-button-icon-size);
  }

  .ui-float-button-content {
    font-size: var(--float-button-content-font-size);
    line-height: var(--float-button-content-line-height);
    text-align: center;
  }

  .ui-float-button-badge {
    position: absolute;
    z-index: 1;
    inset-block-start: var(--float-button-badge-inset-block-start);
    inset-inline-end: var(--float-button-badge-inset-inline-end);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--float-button-badge-size);
    block-size: var(--float-button-badge-size);
    padding-inline: var(--float-button-badge-padding-inline);
    border-radius: var(--radius-pill);
    background: var(--float-button-badge-background, hsl(var(--destructive)));
    color: var(--float-button-badge-foreground);
    font-size: var(--float-button-badge-font-size);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .ui-float-button-badge[data-dot] {
    min-inline-size: var(--float-button-badge-dot-size);
    inline-size: var(--float-button-badge-dot-size);
    block-size: var(--float-button-badge-dot-size);
    padding-inline: 0;
  }

  .ui-float-button-group {
    position: fixed;
    z-index: var(--overlay-z-index);
    inset-block-end: var(--float-button-offset-block-end);
    inset-inline-end: var(--float-button-offset-inline-end);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--float-button-group-gap);
    pointer-events: none;
  }

  .ui-float-button-list {
    display: flex;
    flex-direction: column;
    gap: var(--float-button-group-gap);
    border-radius: var(--float-button-group-radius);
  }

  .ui-float-button-group:not([data-individual]) .ui-float-button-list {
    gap: 0;
    box-shadow: var(--float-button-shadow);
  }

  .ui-float-button-group:not([data-individual]) .ui-float-button {
    border-radius: 0;
    box-shadow: none;
  }

  .ui-float-button-group:not([data-individual]) .ui-float-button-list > :first-child {
    border-start-start-radius: var(--float-button-group-radius);
    border-start-end-radius: var(--float-button-group-radius);
  }

  .ui-float-button-group:not([data-individual]) .ui-float-button-list > :last-child {
    border-end-start-radius: var(--float-button-group-radius);
    border-end-end-radius: var(--float-button-group-radius);
  }

  .ui-float-button-group[data-menu-mode] .ui-float-button-list {
    position: absolute;
  }

  .ui-float-button-group[data-menu-mode][data-placement="top"] .ui-float-button-list {
    inset-block-end: calc(var(--float-button-size) + var(--float-button-group-gap));
  }

  .ui-float-button-group[data-menu-mode][data-placement="bottom"] .ui-float-button-list {
    inset-block-start: calc(var(--float-button-size) + var(--float-button-group-gap));
  }

  .ui-float-button-group[data-menu-mode][data-placement="left"] .ui-float-button-list,
  .ui-float-button-group[data-menu-mode][data-placement="right"] .ui-float-button-list {
    flex-direction: row;
  }

  .ui-float-button-group[data-menu-mode][data-placement="left"] .ui-float-button-list {
    inset-inline-end: calc(var(--float-button-size) + var(--float-button-group-gap));
  }

  .ui-float-button-group[data-menu-mode][data-placement="right"] .ui-float-button-list {
    inset-inline-start: calc(var(--float-button-size) + var(--float-button-group-gap));
  }

  .ui-float-button-group[data-menu-mode][data-state="open"] .ui-float-button-list {
    animation: ui-float-button-list-in var(--duration-fast) var(--ease-standard);
  }

  .ui-float-button-back-top[data-progress]::after {
    position: absolute;
    border-radius: inherit;
    content: "";
    inset: 0;
    background: conic-gradient(
      var(--float-button-progress-color, hsl(var(--primary))) var(--float-button-progress-offset),
      var(--float-button-progress-track-color) var(--float-button-progress-offset)
    );
    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - var(--float-button-progress-width)),
      #000 calc(100% - var(--float-button-progress-width))
    );
    pointer-events: none;
  }
}

@keyframes ui-float-button-list-in {
  from {
    opacity: 0;
    translate: 0 var(--float-button-motion-translate);
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}