:root, ::before, ::after {
--fum-height: 1.5em;
--fum-padding-tb: 0.375rem;
--fum-padding-lr: 0.75rem;
--fum-padding-top: var(--fum-padding-tb);
--fum-padding-right: var(--fum-padding-lr);
--fum-padding-bottom: var(--fum-padding-tb);
--fum-padding-left: var(--fum-padding-lr);
--fum-border-width: 1px;
--fum-border-color: var(--gray-light);
--fum-border-radius: 0.25rem;
--fum-bg-color: var(--white);
--fum-color: var(--gray);

--fum-button-bg-color: var(--light);
--fum-delete-bg-color: var(--fum-button-bg-color);
--fum-browse-bg-color: var(--fum-button-bg-color);
--fum-delete-border-color: var(--fum-border-color);
--fum-delete-color: var(--danger);
--fum-browse-border-color: var(--fum-border-color);
--fum-browse-color: var(--fum-color);
--fum-preview-max-width: 100%;
--fum-preview-max-height: 100%;
--fum-preview-ratio-width: 1920;
--fum-preview-ratio-height: 1080;
--fum-preview-margin: 0.5rem;
--fum-preview-border-color: var(--secondary);
--fum-preview-border-radius: var(--fum-border-radius);
--fum-preview-bg-color: var(--fum-bg-color);
--fum-preview-color: var(--fum-preview-border-color);

--fum-border-color-disabled: var(--fum-border-color);
--fum-bg-color-disabled: var(--light);
--fum-color-disabled: var(--gray);
--fum-button-bg-color-disabled: var(--fum-button-bg-color);
--fum-delete-bg-color-disabled: var(--fum-button-bg-color-disabled);
--fum-browse-bg-color-disabled: var(--fum-button-bg-color-disabled);
--fum-delete-border-color-disabled: var(--fum-border-color-disabled);
--fum-delete-color-disabled: var(--fum-delete-color);
--fum-browse-border-color-disabled: var(--fum-border-color-disabled);
--fum-browse-color-disabled: var(--fum-browse-color);
--fum-preview-border-color-disabled: var(--fum-border-color-disabled);
--fum-preview-bg-color-disabled: var(--fum-bg-color-disabled);
--fum-preview-color-disabled: var(--fum-preview-border-color-disabled);

--fum-border-color-focus: var(--primary);
--fum-bg-color-focus: var(--fum-bg-color);
--fum-color-focus: var(--fum-color);
--fum-button-bg-color-focus: var(--fum-button-bg-color);
--fum-delete-bg-color-focus: var(--danger);
--fum-browse-bg-color-focus: var(--fum-browse-bg-color);
--fum-delete-border-color-focus: var(--fum-border-color-focus);
--fum-delete-color-focus: var(--white);
--fum-browse-border-color-focus: var(--fum-border-color-focus);
--fum-browse-color-focus: var(--fum-browse-color);
--fum-preview-border-color-focus: var(--fum-border-color-focus);
--fum-preview-bg-color-focus: var(--fum-bg-color-focus);
--fum-preview-color-focus: var(--fum-preview-border-color-focus);

--fum-border-color-hover: var(--fum-border-color-focus);
--fum-bg-color-hover: var(--fum-bg-color-focus);
--fum-color-hover: var(--fum-color-focus);
--fum-button-bg-color-hover: var(--fum-button-bg-color-focus);
--fum-delete-bg-color-hover: var(--fum-delete-bg-color-focus);
--fum-browse-bg-color-hover: var(--fum-browse-bg-color-focus);
--fum-delete-border-color-hover: var(--fum-delete-border-color-focus);
--fum-delete-color-hover: var(--fum-delete-color-focus);
--fum-browse-border-color-hover: var(--fum-browse-border-color-focus);
--fum-browse-color-hover: var(--fum-browse-color-focus);
--fum-preview-border-color-hover: var(--fum-preview-border-color-focus);
--fum-preview-bg-color-hover: var(--fum-bg-color-hover);
--fum-preview-color-hover: var(--fum-preview-border-color-hover);

--fum-bg-color-dragover: var(--fum-border-color-focus);
}

/* Base style */
.fum-wrapper {
position: relative;
display: inline-block;
width: 100%;
margin-bottom: 0;
padding-top: calc(var(--fum-height) + var(--fum-padding-top) + var(--fum-padding-bottom) + 2 * var(--fum-border-width) + var(--fum-preview-margin));
}
.fum-input {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
height: calc(var(--fum-height) + var(--fum-padding-top) + var(--fum-padding-bottom) + 2 * var(--fum-border-width));
margin: 0;
opacity: 0;
}
.fum-input:focus ~ .fum-label {
border-color: var(--fum-border-color);
}
.fum-label {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
height: calc(var(--fum-height) + var(--fum-padding-top) + var(--fum-padding-bottom) + 2 * var(--fum-border-width));
margin: 0;
padding: var(--fum-padding-top) var(--fum-padding-right) var(--fum-padding-bottom) var(--fum-padding-left);
overflow-x: clip;
white-space: nowrap;
font-weight: 400;
line-height: 1.5;
background-color: var(--fum-bg-color);
color: var(--fum-color);
border: var(--fum-border-width) solid var(--fum-border-color);
border-radius: var(--fum-border-radius);
}
.fum-delete {
position: absolute;
top: 0;
right: 0;
z-index: 3;
display: none;
height: calc(var(--fum-height) + var(--fum-padding-top) + var(--fum-padding-bottom) + 2 * var(--fum-border-width));
aspect-ratio: 1 / 1;
padding: var(--fum-padding-top) var(--fum-padding-right) var(--fum-padding-bottom) var(--fum-padding-left);
line-height: 1.5;
border: var(--fum-border-width) solid var(--fum-border-color);
border-radius: 0 var(--fum-border-radius) var(--fum-border-radius) 0;
background-color: var(--fum-delete-bg-color);
color: var(--fum-delete-color);
cursor: pointer;
}
.fum-input + input[placeholder="base64"]:not(:placeholder-shown) ~ .fum-delete {
display: block;
}
.fum-delete::before, .fum-delete::after {
content: '';
position: absolute;
top: 48%;
right: 25%;
bottom: 48%;
left: 25%;
display: block;
border-radius: var(--fum-height);
background-color: CurrentColor;
}
.fum-delete::before {
rotate: -45deg;
}
.fum-delete::after {
rotate: 45deg;
}
.fum-browse {
position: absolute;
top: var(--fum-border-width);
right: var(--fum-border-width);
z-index: 3;
display: block;
height: calc(var(--fum-height) + var(--fum-padding-top) + var(--fum-padding-bottom));
padding: var(--fum-padding-top) var(--fum-padding-right) var(--fum-padding-bottom) var(--fum-padding-left);
line-height: 1.5;
background-color: var(--fum-browse-bg-color);
color: var(--fum-browse-color);
border-left: var(--fum-border-width) solid var(--fum-border-color);
border-radius: 0 var(--fum-border-radius) var(--fum-border-radius) 0;
text-align: center;
cursor: pointer;
}
.fum-input + input[placeholder="base64"]:not(:placeholder-shown) ~ .fum-delete ~ .fum-browse {
display: none !important;
}
.fum-input, .fum-input *, .fum-preview {
cursor: default;
}
.fum-input:not([disabled]):not(:disabled), .fum-input:not([disabled]):not(:disabled) *, .fum-input:not([disabled]):not(:disabled) ~ .fum-preview {
cursor: pointer;
}
.fum-preview {
position: relative;
box-sizing: content-box;
display: block;
width: min(100% - 2 * var(--fum-border-width), var(--fum-preview-max-width));
aspect-ratio: var(--fum-preview-ratio-width) / var(--fum-preview-ratio-height);
max-height: var(--fum-preview-max-height);
margin: 0 auto;
border: var(--fum-border-width) solid Transparent;
border-radius: var(--fum-preview-border-radius);
background-color: var(--fum-preview-bg-color);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
color: var(--fum-preview-color);
}
.fum-preview.fum-preview-cover {
background-size: cover;
}
.fum-preview-image {
border-color: var(--fum-preview-border-color);
}
.fum-preview-audio, .fum-preview-video, .fum-preview-document {
display: none;
margin-top: calc(-1 * var(--fum-preview-ratio-height) * min(100% - 2 * var(--fum-border-width), var(--fum-preview-max-width)) / var(--fum-preview-ratio-width) - 2 * var(--fum-border-width));
}
.fum-preview-audio {
pointer-events: none;
}
.fum-preview-audio audio {
align-self: center;
width: 100%;
outline: none;
pointer-events: auto;
}
.fum-wrapper.fum-audio .fum-preview-audio, .fum-wrapper.fum-video .fum-preview-video, .fum-wrapper.fum-document .fum-preview-document {
display: flex;
}

/* Preview before */
.fum-preview-before {
display: flex;
flex-direction: column;
padding-top: 0;
padding-bottom: calc(var(--fum-height) + var(--fum-padding-top) + var(--fum-padding-bottom) + 2 * var(--fum-border-width) + var(--fum-preview-margin));
}
.fum-preview-before .fum-input {
order: 2;
top: auto;
bottom: 0;
}
.fum-preview-before .fum-label, .fum-preview-before .fum-delete, .fum-preview-before .fum-browse {
order: 2;
top: auto;
bottom: 0;
}
.fum-preview-before .fum-label {
margin-top: var(--fum-preview-margin);
margin-bottom: 0;
}
.fum-preview-before .fum-browse {
margin-bottom: var(--fum-border-width);
}

/* Disabled */
.fum-input[disabled] ~ .fum-label, .fum-input:disabled ~ .fum-label {
border-color: var(--fum-border-color-disabled);
background-color: var(--fum-bg-color-disabled);
color: var(--fum-color-disabled);
}
.fum-input[disabled] ~ .fum-delete, .fum-input:disabled ~ .fum-delete {
border-color: var(--fum-border-color-disabled);
background-color: var(--fum-delete-bg-color-disabled);
color: var(--fum-delete-color-disabled);
}
.fum-input[disabled] ~ .fum-browse, .fum-input:disabled ~ .fum-browse {
border-color: var(--fum-border-color-disabled);
background-color: var(--fum-browse-bg-color-disabled);
color: var(--fum-browse-color-disabled);
}
.fum-input[disabled] ~ .fum-preview, .fum-input:disabled ~ .fum-preview {
border-color: var(--fum-preview-border-color-disabled);
background-color: var(--fum-preview-bg-color-disabled);
color: var(--fum-preview-color-disabled);
}

/* Focus/active */
.fum-wrapper .fum-input:focus:not([disabled]):not(:disabled) ~ .fum-label, .fum-wrapper .fum-input:active:not([disabled]):not(:disabled) ~ .fum-label {
border-color: var(--fum-border-color-focus);
background-color: var(--fum-bg-color-focus);
color: var(--fum-color-focus);
}
.fum-wrapper .fum-input:focus:not([disabled]):not(:disabled) ~ .fum-delete, .fum-wrapper .fum-input:active:not([disabled]):not(:disabled) ~ .fum-delete {
border-top-color: var(--fum-border-color-focus);
border-right-color: var(--fum-border-color-focus);
border-bottom-color: var(--fum-border-color-focus);
}
.fum-wrapper .fum-input:focus:not([disabled]):not(:disabled) ~ .fum-browse, .fum-wrapper .fum-input:active:not([disabled]):not(:disabled) ~ .fum-browse {
border-color: var(--fum-border-color-focus);
background-color: var(--fum-browse-bg-color-focus);
color: var(--fum-browse-color-focus);
}
.fum-wrapper .fum-input:focus:not([disabled]):not(:disabled) ~ .fum-preview, .fum-wrapper .fum-input:active:not([disabled]):not(:disabled) ~ .fum-preview {
border-color: var(--fum-preview-border-color-focus);
background-color: var(--fum-preview-bg-color-focus);
color: var(--fum-preview-color-focus);
}
.fum-input:not([disabled]):not(:disabled) ~ .fum-delete:focus, .fum-input:not([disabled]):not(:disabled) ~ .fum-delete:active {
border-color: var(--fum-delete-border-color-focus);
background-color: var(--fum-delete-bg-color-focus);
color: var(--fum-delete-color-focus);
}

/* Hover */
.fum-wrapper:hover .fum-input:not([disabled]):not(:disabled) ~ .fum-label {
border-color: var(--fum-border-color-hover);
background-color: var(--fum-bg-color-hover);
color: var(--fum-color-hover);
}
.fum-wrapper:hover .fum-input:not([disabled]):not(:disabled) ~ .fum-delete {
border-top-color: var(--fum-border-color-hover);
border-right-color: var(--fum-border-color-hover);
border-bottom-color: var(--fum-border-color-hover);
}
.fum-wrapper:hover .fum-input:not([disabled]):not(:disabled) ~ .fum-browse {
border-color: var(--fum-browse-border-color-hover);
background-color: var(--fum-browse-bg-color-hover);
color: var(--fum-browse-color-hover);
}
.fum-wrapper:hover .fum-input:not([disabled]):not(:disabled) ~ .fum-preview {
border-color: var(--fum-preview-border-color-hover);
background-color: var(--fum-preview-bg-color-hover);
color: var(--fum-preview-color-hover);
}
.fum-input:not([disabled]):not(:disabled) ~ .fum-delete:hover {
border-color: var(--fum-delete-border-color-hover);
background-color: var(--fum-delete-bg-color-hover);
color: var(--fum-delete-color-hover);
}

/* Drag over */
.fum-dragover .fum-input, .fum-dragover::after {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 19 !important;
display: block !important;
height: auto;
padding: 0 !important;
margin: 0 !important;
border-width: 0 !important;
border-radius: var(--fum-border-radius) var(--fum-border-radius) var(--fum-preview-border-radius) var(--fum-preview-border-radius);
}
.fum-dragover.fum-preview-before .fum-input, .fum-dragover.fum-preview-before::after {
border-radius: var(--fum-preview-border-radius) var(--fum-preview-border-radius) var(--fum-border-radius) var(--fum-border-radius);
}
.fum-dragover::after {
content: '' !important;
z-index: 18 !important;
background-color: var(--fum-bg-color-dragover) !important;
opacity: 0.25;
}