@layer base, components, utility;

@import "base/fonts.css" layer(base);
@import "base/reset.css" layer(base);
@import "base/global.css" layer(base);
@import "base/properties.css" layer(base);
@import "base/typography.css" layer(base);

@import "components/avatar.css" layer(base);
@import "components/button.css" layer(base);
@import "components/input.css" layer(base);
@import "components/form.css" layer(base);
@import "components/bookmark.css" layer(base);

@import "utility/hidden.css" layer(base);
@import "utility/flex.css" layer(base);

.error {
  color: rgb(var(--color-red));
  font-weight: 700;
}

.pointer {
  --size: 50px;
  background: url("/images/pointer.svg") center / 100% auto no-repeat;
  block-size: var(--size);
  filter: drop-shadow(2px 2px 0px rgb(var(--color-brown) / 0.3));
  inset-block-start: calc(
    anchor(start) + ((0.5 * anchor-size(block) - (0.5 * var(--size))))
  );
  inset-inline-end: calc(anchor(start) + 5px);
  inline-size: var(--size);
  pointer-events: none;
  position-anchor: --pointer;
  position: fixed;
  user-select: none;
  z-index: 999;

  @supports not (inset: anchor(start)) {
    display: none;
  }
}

#handle {
  anchor-name: --handle;

  &:focus-visible {
    anchor-name: --pointer, --handle;
  }
}

#handle-listbox {
  background: rgb(var(--color-white));
  border: 5px solid rgb(var(--color-black));
  display: grid;
  inline-size: anchor-size(--handle inline);
  inset-block-start: -5px;
  max-block-size: 230px;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  position-anchor: --handle;
  position-area: block-end center;
  position-visibility: no-overflow;

  & .Avatar {
    --size: 40px;
    padding: 5px 10px;
  }

  & [aria-selected="true"] {
    background: rgb(var(--color-light-yellow));
  }

  & > p {
    background: rgb(var(--color-brown) / 0.2);
    color: rgb(var(--color-brown));
    font-size: var(--font-size-1);
    padding: 5px 10px;
  }

  & [role="option"] {
    cursor: pointer;

    &:hover {
      background: rgb(var(--color-yellow));
    }
  }

  @supports not (inset: anchor(start)) {
    display: none;
  }
}