.configuration-variant-view {
    display: flex;
    flex-direction: column;
    gap: var(--size-spacing-12);
    padding: var(--size-spacing-16);
    border-radius: var(--size-radius-base);
    background-color: rgb(var(--color-secondary-100-rgb));
    border: 1px solid rgb(var(--color-secondary-200-rgb));
}

.configuration-variant-view .controls-topleft {
    display: flex;
    flex-direction: row;
    gap: var(--size-spacing-8);
}

    .configuration-variant-view.warning {
        border-color: rgb(var(--color-yellow-500-rgb));
        box-shadow: inset 0 0 4px 0 rgb(var(--color-yellow-500-rgb));
    }

    .configuration-variant-view .identification {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

        .configuration-variant-view .identification .number-notification {
            display: flex;
            flex-direction: row;
            gap: var(--size-spacing-8);
        }


        .configuration-variant-view .identification .number-notification .number {
            display: flex;
            flex-direction: row;
            border-radius: var(--size-radius-base);
            background-color: rgb(var(--color-secondary-400-rgb));
            padding: var(--size-spacing-4) var(--size-spacing-8) var(--size-spacing-4) var(--size-spacing-4);
            gap: var(--size-spacing-4);
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            height: fit-content;
        }

            .configuration-variant-view .identification .number-notification .number p {
                color: rgb(var(--color-neutral-500-rgb));
                width: 20px;
                text-align: center;
            }

            .configuration-variant-view .identification .number-notification .number .icon-mask {
                --icon-color: rgb(var(--color-neutral-500-rgb));
            }

.configuration-variant-view .name-type{
    display: flex;
    flex-direction: row;
    gap: var(--size-spacing-16);
}

    .configuration-variant-view .form-simple{
        display: flex;
        flex-direction: row;
        gap: var(--size-spacing-8);
        width: 100%;
    }

        .configuration-variant-view .form-simple .regex {
            flex: 6;
        }

        .configuration-variant-view .form-simple .prefix,
        .configuration-variant-view .form-simple .suffix {
            flex: 1;
        }