@layer components {
  .multiselect {
    position: relative;
    display: inline-block;

    &[open] .multiselect__trigger {
      background: var(--color-ink);
      color: var(--color-ink-inverted);
    }
  }

  .multiselect__trigger {
    display: inline-block;
    padding: 0.25em 0.75em;
    font-size: var(--text-footnote);
    border-radius: var(--border-radius-pill);
    background: var(--color-border);
    color: var(--color-ink);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      content: " \25BC";
      font-size: 0.6em;
      vertical-align: middle;
    }
  }

  .multiselect__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    min-width: 200px;
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
  }

  .multiselect__options {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
  }

  .multiselect__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: var(--text-footnote);
    cursor: pointer;
    border-radius: var(--border-radius);

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-border);
      }
    }

    input[type="checkbox"] {
      margin: 0;
    }
  }

  .multiselect__actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    border-top: 1px solid var(--color-border);
    justify-content: flex-end;
  }
}