.br-upload input {
    display: none;
}

.br-upload .upload-button {
    --button-radius: 100em;
    --button-xsmall: 24px;
    --button-small: 32px;
    --button-medium: 40px;
    --button-large: 48px;
    --button-size: var(--button-medium);
    align-items: center;
    background-color: transparent;
    border: 0;
    border-radius: var(--button-radius);
    color: var(--interactive);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--font-size-scale-up-01);
    font-weight: var(--font-weight-semi-bold);
    height: var(--button-size);
    justify-content: center;
    overflow: hidden;
    padding: 0 var(--spacing-scale-3x);
    position: relative;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    border: var(--surface-width-sm) dashed var(--interactive);
    border-radius: var(--surface-rounder-sm);
    display: block;
    font-size: var(--font-size-scale-base);
    font-style: italic;
    font-weight: var(--font-weight-regular);
    margin-top: var(--spacing-scale-half);
    max-width: 100%;
    min-height: var(--button-size);
    padding-left: var(--spacing-scale-2x);
    padding-right: var(--spacing-scale-2x);
    text-align: center;
    width: 100%;
}

.br-upload .upload-button .svg-inline--fa,
.br-upload .upload-button .fa,
.br-upload .upload-button .fab,
.br-upload .upload-button .fad,
.br-upload .upload-button .fal,
.br-upload .upload-button .far,
.br-upload .upload-button .fas {
    margin-right: var(--spacing-scale-base);
}

.br-upload .upload-list {
    max-width: 100% !important;
    position: relative;
}

.br-upload .upload-list .content {
    align-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 90%;
}

.br-upload .upload-list .support {
    align-items: center;
    display: flex;
}

.br-upload .br-tooltip {
    max-width: 93%;
}

.br-upload .upload-button:disabled {
    cursor: not-allowed;
}

.br-upload .upload-button:not(:disabled) {
    --focus-offset: var(--spacing-scale-half);
}

.br-upload .upload-button:not(:disabled):focus {
    outline: none;
}

.br-upload .upload-button:not(:disabled).focus-visible,
.br-upload .upload-button:not(:disabled):focus-visible {
    outline-color: var(--focus);
    outline-offset: var(--focus-offset);
    outline-style: var(--focus-style);
    outline-width: var(--focus-width);
}

.br-upload .upload-button:not(:disabled):not(:disabled):hover {
    background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}

.br-upload .upload-button:not(:disabled):not(:disabled):active {
    background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}

.br-upload .upload-button.active,
.br-upload .upload-button.is-active,
.br-upload .upload-button[active] {
    --hover: var(--hover-dark);
    background-color: var(--active);
    color: var(--color-dark);
}

.br-upload .upload-button.loading::after,
.br-upload .upload-button[loading]::after,
.br-upload .upload-button.is-loading::after {
    border-color: var(--interactive) var(--interactive) transparent;
    border-style: solid;
}

.br-upload .upload-button.loading.primary::after,
.br-upload .upload-button.loading.danger::after,
.br-upload .upload-button.loading.success::after,
.br-upload .upload-button.loading.info::after,
.br-upload .upload-button[loading].primary::after,
.br-upload .upload-button[loading].danger::after,
.br-upload .upload-button[loading].success::after,
.br-upload .upload-button[loading].info::after,
.br-upload .upload-button.is-loading.primary::after,
.br-upload .upload-button.is-loading.danger::after,
.br-upload .upload-button.is-loading.success::after,
.br-upload .upload-button.is-loading.info::after {
    border-color: var(--background) var(--background) transparent;
}

.br-upload.success .upload-button,
.br-upload[data-success] .upload-button {
    border-color: var(--success);
}

.br-upload.danger .upload-button,
.br-upload[data-danger] .upload-button {
    border-color: var(--danger);
}

.br-upload.warning .upload-button,
.br-upload[data-warning] .upload-button {
    border-color: var(--warning);
}

.br-upload.info .upload-button,
.br-upload[data-info] .upload-button {
    border-color: var(--info);
}

.br-upload.dragging .upload-button {
    background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}

.br-upload button.upload-button {
    width: 100% !important;
    margin: 0 !important;
    border: 2px solid #88BD2F;
}

button.upload-button span {
    font-weight: 600;
    font-size: 20px;
    color: #88bd2f;
}

button.upload-button i {
    color: #88bd2f;
}