.cf-file-upload {
        display: grid;
        gap: var(--cf-spacing-small);

        &__label {
            background-color: var(--cf-color-background-light);
            border: 1px solid var(--cf-color-border);
            border-radius: var(--cf-border-radius);
            padding: var(--cf-spacing);
            gap: var(--cf-spacing-small);
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        &__input {
            cursor: pointer !important;
            display: block;
            font-size: 999px;
            filter: alpha(opacity=0);
            opacity: 0;
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            top: 0;
            z-index: 2;
        }
        
        &__select-title {
            color: var(--cf-color-primary);
        }
        
        &__drop-zone {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            background-color: var(--cf-color-background-light);
            border: 5px var(--cf-color-border) dashed;
            margin: var(--cf-spacing-small);
        }

        &__drop-zone-content {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100%;
        }

        &__file-upload-label {
            text-align: center;
        }

        &__file-drop-zone-label {
            color: var(--cf-color-text-light);
        }

        &__dropped {
            display: grid;
            gap: var(--cf-spacing-small);
        }

        &__dropped-file-label {
            color: var(--cf-color-text-light);
        }

        &__dropped-file-name {
            color: var(--cf-color-secondary);
        }
    }