@use '../../theme/form-fields' as form-fields-theme;
@use '../../tools/accessibility';
@use '../../tools/reset';
@use '../../tools/typography';
@use 'theme';

.FileUploaderAttachment {
    @include typography.generate(theme.$attachment-typography);

    display: flex;
    column-gap: theme.$attachment-column-gap;
    align-items: center;
    padding: theme.$attachment-padding;
    color: theme.$attachment-color;
    border: theme.$attachment-border;
    border-radius: theme.$attachment-border-radius;
    background-color: theme.$attachment-background;
}

.FileUploaderAttachment__image {
    position: relative;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border: theme.$attachment-image-border;
    border-radius: theme.$attachment-image-border-radius;
}

.FileUploaderAttachment__image > img {
    position: absolute;
    top: var(--file-uploader-attachment-image-top, 0);
    left: var(--file-uploader-attachment-image-left, 0);
    width: var(--file-uploader-attachment-image-width, 100%);
    height: var(--file-uploader-attachment-image-height, 100%);
    object-fit: var(--file-uploader-attachment-image-object-fit, cover);
    object-position: center;
}

.FileUploaderAttachment__name {
    display: grid;
    flex: 1;
}

.FileUploaderAttachment__slot {
    display: flex;
    gap: theme.$attachment-column-gap;
    align-items: center;
    justify-content: space-between;
}

.FileUploaderAttachment__action {
    @include reset.button();
    @include accessibility.min-tap-target($size: theme.$attachment-tap-target-size);

    color: inherit;

    &:focus-visible {
        outline: 0;
        box-shadow: form-fields-theme.$input-focus-shadow;
    }
}
