@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;

@layer cinder.components {
  .cinder-transfer-list {
    container-type: inline-size;
    container-name: cinder-transfer-list;
  }

  .cinder-transfer-list__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cinder-space-3);
    margin-block-end: var(--cinder-space-2);
  }

  .cinder-transfer-list__label {
    margin: 0;
  }

  .cinder-transfer-list__list {
    min-block-size: 12rem;
    max-block-size: 24rem;
    margin: 0;
    padding: var(--cinder-space-2);
    list-style: none;
    overflow: auto;
    border: 1px solid var(--cinder-border-muted);
    border-radius: var(--cinder-radius-md);
    background: var(--cinder-surface);
    box-shadow: var(--_cinder-transfer-list-scroll-shadow, none);
  }

  .cinder-transfer-list__list[data-cinder-overflows-block] {
    --_cinder-transfer-list-scroll-shadow:
      inset 0 1rem 1rem -1rem color-mix(in srgb, var(--cinder-text-default) 20%, transparent),
      inset 0 -1rem 1rem -1rem color-mix(in srgb, var(--cinder-text-default) 20%, transparent);
  }

  .cinder-transfer-list__list:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    border-color: transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  @media (forced-colors: active) {
    .cinder-transfer-list__list:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: calc(-1 * var(--cinder-ring-width));
      box-shadow: none;
    }
  }

  .cinder-transfer-list__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cinder-space-3);
    color: var(--cinder-text-default);
    cursor: pointer;
    user-select: none;
  }

  .cinder-transfer-list__option[aria-disabled='true'] {
    color: var(--cinder-text-disabled);
    cursor: not-allowed;
  }

  .cinder-transfer-list__status {
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-xs);
    font-weight: var(--cinder-font-medium);
  }

  .cinder-transfer-list__empty {
    padding: var(--cinder-space-3);
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
  }
}