.floating {
  position: fixed;
  inset: auto auto var(--grapes-unit-20) 50%;
  translate: -50% 0;
  z-index: var(--grapes-z-index-floating-action-bar);
}

.container {
  --_inline-size-separator: 1px;
  --_block-size-separator: var(--grapes-unit-24);
  --_gap: var(--grapes-unit-8);

  color-scheme: light;
  display: inline-flex;
  border-radius: var(--grapes-border-radius-12);
  padding: var(--grapes-unit-8);
  background-color: var(--grapes-color-background-complementary-default);
}

.container,
.container > menu {
  flex-direction: row;
  align-items: center;
  gap: 0 calc(var(--_gap) + var(--_inline-size-separator));
}

.container > p {
  font: var(--grapes-body-m);
  color: #c5b6ff;
  padding: 0 var(--grapes-unit-16);
  margin: 0;
  flex-shrink: 0;
}

.container > menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.container li {
  position: relative;

  &::before {
    --_height: var(--grapes-unit-24);
    position: absolute;
    inset-inline-start: calc(
      -1 * (var(--_gap) / 2 + var(--_inline-size-separator))
    );
    inset-block-start: calc(
      (var(--grapes-unit-40) - var(--_block-size-separator)) / 2
    );
    content: '';
    display: block;
    inline-size: var(--_inline-size-separator);
    block-size: var(--_block-size-separator);
    background-color: var(--grapes-color-border-complementary);
  }
}