.seed-attachment-input-item__root {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--seed-dimension-x2_5);
    height: 80px;
    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);
}
.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: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(black, black), 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-repeat: no-repeat;
    -webkit-mask-composite: source-out;
    mask-image: linear-gradient(black, black), 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>');
    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));
    mask-repeat: no-repeat;
    mask-composite: subtract;
    transform: translateZ(0);
}
.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 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    -webkit-mask-image: linear-gradient(black, black), 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-repeat: no-repeat;
    -webkit-mask-composite: source-out;
    mask-image: linear-gradient(black, black), 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>');
    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));
    mask-repeat: no-repeat;
    mask-composite: subtract;
    transform: translateZ(0);
}
.seed-attachment-input-item__thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--seed-dimension-x12);
    height: var(--seed-dimension-x12);
    background-color: var(--seed-color-bg-neutral-weak);
    border-radius: var(--seed-radius-r2);
    flex-shrink: 0;
    --seed-icon-size: var(--seed-dimension-x6);
    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
}
.seed-attachment-input-item__metadata {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
}
.seed-attachment-input-item__name {
    overflow: hidden;
    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);
}
.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 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    -webkit-mask-image: linear-gradient(black, black), 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-repeat: no-repeat;
    -webkit-mask-composite: source-out;
    mask-image: linear-gradient(black, black), 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>');
    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));
    mask-repeat: no-repeat;
    mask-composite: subtract;
    transform: translateZ(0);
}
.seed-attachment-input-item__actionButton {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
    padding: 0;
    font: inherit;
    background: transparent;
    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);
}
.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 {
    position: absolute;
    top: calc(var(--seed-dimension-x1) * -1);
    right: calc(var(--seed-dimension-x1) * -1);
    width: var(--seed-dimension-x5);
    height: var(--seed-dimension-x5);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    background-color: var(--seed-color-bg-layer-default);
    border-radius: var(--seed-radius-full);
    cursor: pointer;
    transition: background-color 0.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);
}
.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:is([data-readonly]) {
    --seed-icon-color: var(--seed-color-fg-disabled);
}
[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:is([data-readonly]) {
    color: var(--seed-color-fg-disabled);
}
[aria-grabbed=true] .seed-attachment-input-item__name--type_general {
    color: var(--seed-color-fg-disabled);
}
.seed-attachment-input-item__size--type_general:is([data-readonly]) {
    color: var(--seed-color-fg-disabled);
}
[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 0.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:is([data-readonly]) {
    opacity: 0.5;
}
.seed-attachment-input-item__root--type_image[aria-grabbed=true] {
    opacity: 0.5;
}
.seed-attachment-input-item__thumbnail--type_image {
    display: none;
}
.seed-attachment-input-item__metadata--type_image {
    display: none;
}
.seed-attachment-input-item__badge--type_image {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    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);
}
.seed-attachment-input-item__badgeLabel--type_image {
    overflow: hidden;
    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);
}
.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);
}