.fileuploader {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    max-width: 100%;

    & > .fileuploader-label-button {
        cursor: pointer;
        user-select: none;

        display: flex;
        align-items: center;
        justify-content: center;

        min-height: 2.25rem;
        padding: 0.5rem 1rem;
        border: 2px dashed var(--clr-input-border);
        border-radius: var(--bdr-rounded);

        font-weight: bold;
        text-align: center;

        background-color: var(--clr-white);
        outline: none;
        box-shadow: var(--shadow-mid);

        transition: var(--transition-easeinout-fast);

        & > .fileuploader-drag-text {
            display: none;
        }

        &:hover {
            transform: translateY(-1px);
            border-color: var(--clr-input-border-hover);
            box-shadow: var(--shadow-high);
        }

        &:focus {
            transform: translateY(1px);
            border-color: var(--clr-input-border-focused);
            box-shadow: var(--shadow-low);
        }

        &.fileuploader-drag-over {
            transform: translateY(-1px);
            border-color: var(--clr-input-border-hover);
            background-color: color-mix(
                in srgb,
                var(--clr-input-border) 10%,
                var(--clr-white)
            );
        }

        /* Desktop-only drag and drop styles */
        @media (hover: hover) and (pointer: fine) {
            & > .fileuploader-drag-text {
                display: inline;
                margin-left: 0.25rem;
                font-weight: normal;
                opacity: 0.7;
            }
        }
    }

    & > .fileuploader-file-list {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-top: 0.5rem;

        & > .fileuploader-file-item {
            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 0.5rem;
            border: var(--bdr-input);
            border-radius: var(--bdr-rounded);

            background-color: var(--clr-white);
            box-shadow: var(--shadow-mid);

            & > .fileuploader-file-name {
                flex: 1;
                font-size: 0.875rem;
                color: var(--clr-text);
                word-break: break-all;
            }

            & > .fileuploader-remove-button {
                cursor: pointer;

                display: flex;
                align-items: center;
                justify-content: center;

                width: 1.5rem;
                height: 1.5rem;
                margin-left: 0.5rem;
                border: none;
                border-radius: 50%;

                font-size: 1rem;
                font-weight: bold;
                color: var(--clr-white);

                background-color: var(--clr-input-error);
                outline: none;

                transition: var(--transition-easeinout-fast);

                &:hover {
                    background-color: var(--clr-primary-dark);
                }

                &:focus {
                    box-shadow: 0 0 0 2px var(--clr-primary);
                }
            }
        }
    }

    /* Error Message */
    & > .error-message {
        align-self: center;

        width: 90%;
        padding: 0 0.5rem;
        border-right: 3px solid transparent;
        border-bottom: 1px solid transparent;
        border-left: 3px solid transparent;
        border-radius: var(--bdr-rounded);

        font-size: 0.875rem;
        font-style: italic;
        color: var(--clr-input-error);

        box-shadow: var(--shadow-mid);

        &:not(.hidden) {
            border-color: var(--clr-input-error);
            background-color: color-mix(
                in srgb,
                var(--clr-input-error) 5%,
                white
            );
        }
    }

    &:has(.fileuploader-label-button:hover) {
        & > .error-message {
            box-shadow: var(--shadow-high);
        }
    }

    &:has(.fileuploader-label-button:focus) {
        & > .error-message {
            box-shadow: var(--shadow-low);
        }
    }
}