@layer seed-components {
  .seed-attachment-input-item__root {
    isolation: isolate;
    justify-content: center;
    align-items: center;
    gap: var(--seed-dimension-x2_5);
    border-radius: var(--seed-radius-r3);
    --remove-button-mask-size: var(--seed-dimension-x6);
    --remove-button-mask-offset: var(--seed-dimension-x1_5);
    outline: var(--seed-dimension-x0_5) solid transparent;
    outline-offset: var(--seed-dimension-x0_5);
    height: 80px;
    display: flex;
    position: relative;
  }

  .seed-attachment-input-item__root:is(:focus-visible, [data-focus-visible]) {
    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
    outline-offset: var(--seed-dimension-x0_5);
  }

  .seed-attachment-input-item__root:before {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"white\"/></svg>");
    -webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
    -webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
    -webkit-mask-composite: source-out;
    mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"white\"/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
    mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
    position: absolute;
    inset: 0;
    transform: translateZ(0);
    mask-repeat: no-repeat;
    mask-composite: subtract;
  }

  .seed-attachment-input-item__root[role="button"]:not([aria-grabbed="true"]):not([data-readonly]) {
    cursor: grab;
  }

  .seed-attachment-input-item__root[aria-grabbed="true"] {
    --remove-button-mask-size: 0px;
    --remove-button-mask-offset: 0px;
  }

  .seed-attachment-input-item__image {
    object-fit: cover;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"white\"/></svg>");
    -webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
    -webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
    -webkit-mask-composite: source-out;
    mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"white\"/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
    mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
    transform: translateZ(0);
    mask-repeat: no-repeat;
    mask-composite: subtract;
  }

  .seed-attachment-input-item__thumbnail {
    width: var(--seed-dimension-x12);
    height: var(--seed-dimension-x12);
    background-color: var(--seed-color-bg-neutral-weak);
    border-radius: var(--seed-radius-r2);
    --seed-icon-size: var(--seed-dimension-x6);
    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .seed-attachment-input-item__metadata {
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    display: flex;
  }

  .seed-attachment-input-item__name {
    word-break: break-all;
    font-size: var(--seed-font-size-t2);
    line-height: var(--seed-line-height-t2);
    font-weight: var(--seed-font-weight-medium);
    color: var(--seed-color-fg-neutral);
    overflow: hidden;
  }

  .seed-attachment-input-item__size {
    font-size: var(--seed-font-size-t1);
    line-height: var(--seed-line-height-t1);
    font-weight: var(--seed-font-weight-regular);
    color: var(--seed-color-fg-neutral-subtle);
  }

  .seed-attachment-input-item__backdrop {
    border-radius: inherit;
    -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"white\"/></svg>");
    -webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
    -webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
    -webkit-mask-composite: source-out;
    mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"white\"/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
    mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
    transform: translateZ(0);
    mask-repeat: no-repeat;
    mask-composite: subtract;
  }

  .seed-attachment-input-item__actionButton {
    text-align: center;
    width: 100%;
    height: 100%;
    font: inherit;
    cursor: pointer;
    border-radius: inherit;
    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
    outline: var(--seed-dimension-x0_5) solid transparent;
    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
    background: none;
    border: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .seed-attachment-input-item__actionButton:is(:focus-visible, [data-focus-visible]) {
    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
  }

  .seed-attachment-input-item__actionButton {
    font-size: var(--seed-font-size-t2);
    line-height: var(--seed-line-height-t2);
    font-weight: var(--seed-font-weight-medium);
    gap: var(--seed-dimension-x1);
    --seed-icon-size: var(--seed-dimension-x6);
  }

  .seed-attachment-input-item__removeButton {
    top: calc(var(--seed-dimension-x1) * -1);
    right: calc(var(--seed-dimension-x1) * -1);
    width: var(--seed-dimension-x5);
    height: var(--seed-dimension-x5);
    background-color: var(--seed-color-bg-layer-default);
    border-radius: var(--seed-radius-full);
    cursor: pointer;
    transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
    outline: var(--seed-dimension-x0_5) solid transparent;
    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: absolute;
  }

  .seed-attachment-input-item__removeButton:is(:focus-visible, [data-focus-visible]) {
    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
  }

  .seed-attachment-input-item__removeButton {
    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
    --seed-icon-size: var(--seed-dimension-x2_5);
    --seed-icon-color: var(--seed-color-fg-neutral);
  }

  @media (hover: hover) and (pointer: fine) {
    .seed-attachment-input-item__removeButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
      background-color: var(--seed-color-bg-layer-default-pressed);
    }
  }

  @media not all and (hover: hover) and (pointer: fine) {
    .seed-attachment-input-item__removeButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
      background-color: var(--seed-color-bg-layer-default-pressed);
    }
  }

  .seed-attachment-input-item__removeButton:is(:disabled, [disabled], [data-disabled]) {
    cursor: not-allowed;
    --seed-icon-color: var(--seed-color-fg-disabled);
  }

  [aria-grabbed="true"] .seed-attachment-input-item__removeButton {
    display: none;
  }

  .seed-attachment-input-item__root--type_general {
    width: 160px;
    padding-left: var(--seed-dimension-x4);
    padding-right: var(--seed-dimension-x4);
  }

  .seed-attachment-input-item__root--type_general:before {
    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
  }

  .seed-attachment-input-item__thumbnail--type_general[data-has-overlay] {
    display: none;
  }

  .seed-attachment-input-item__thumbnail--type_general[data-readonly], [aria-grabbed="true"] .seed-attachment-input-item__thumbnail--type_general {
    --seed-icon-color: var(--seed-color-fg-disabled);
  }

  .seed-attachment-input-item__metadata--type_general[data-has-overlay] {
    display: none;
  }

  .seed-attachment-input-item__name--type_general[data-readonly], [aria-grabbed="true"] .seed-attachment-input-item__name--type_general, .seed-attachment-input-item__size--type_general[data-readonly], [aria-grabbed="true"] .seed-attachment-input-item__size--type_general {
    color: var(--seed-color-fg-disabled);
  }

  .seed-attachment-input-item__actionButton--type_general {
    color: var(--seed-color-fg-neutral-subtle);
    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
  }

  .seed-attachment-input-item__root--type_image {
    width: 80px;
    transition: opacity .2s;
  }

  .seed-attachment-input-item__root--type_image:before {
    z-index: 1;
    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
  }

  .seed-attachment-input-item__root--type_image[data-readonly], .seed-attachment-input-item__root--type_image[aria-grabbed="true"] {
    opacity: .5;
  }

  .seed-attachment-input-item__thumbnail--type_image, .seed-attachment-input-item__metadata--type_image {
    display: none;
  }

  .seed-attachment-input-item__badge--type_image {
    height: var(--seed-dimension-x6);
    padding-left: var(--seed-dimension-x1);
    padding-right: var(--seed-dimension-x1);
    background-color: var(--seed-color-bg-overlay);
    border-radius: 0 0 var(--seed-radius-r3) var(--seed-radius-r3);
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .seed-attachment-input-item__badgeLabel--type_image {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--seed-font-size-t2);
    line-height: var(--seed-line-height-t2);
    font-weight: var(--seed-font-weight-medium);
    color: var(--seed-color-palette-static-white);
    overflow: hidden;
  }

  .seed-attachment-input-item__backdrop--type_image {
    background: var(--seed-color-bg-overlay);
  }

  .seed-attachment-input-item__actionButton--type_image {
    color: var(--seed-color-palette-static-white);
    --seed-icon-color: var(--seed-color-palette-static-white);
  }
}