.input-label {
    display: block;
    transform-origin: top left;
}

.input-label-inputcontrol {
    top: 0;
    left: 0;
    position: absolute;
    transform: translate(0, 24px) scale(1);
}

.input-label-margindense {
    transform: translate(0, 21px) scale(1);
}

.input-label-shrink {
    transform: translate(0, 1.5px) scale(0.75);
    transform-origin: top left;
}

.input-label-animated {
    transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
}

.input-label-filled {
    z-index: 1;
    transform: translate(12px, 20px) scale(1);
    pointer-events: none;

    &.input-label-margin-dense {
        transform: translate(12px, 17px) scale(1);
    }
}


.input-label-outlined {
    transform: translate(14px, 20px) scale(1);
    pointer-events: none;
    background-color: var(--palette-surface);
    padding: 0px 5px !important;


    &.input-label-margin-dense {
        transform: translate(14px, 12px) scale(1);
    }
}

label.input-label.input-label-inputcontrol {
    .shrink ~ & {
        color: var(--palette-text-primary);
    }

    .input:focus-within ~ & {
        color: var(--palette-primary);
    }

    .shrink ~ &,
    .input:focus-within ~ & {
        transform: translate(0, 1.5px) scale(0.75);
        transform-origin: top left;

        &.input-label-filled {
            transform: translate(12px, 10px) scale(0.75);

            &.input-label-margin-dense {
                transform: translate(12px, 7px) scale(0.75);
            }
        }

        &.input-label-outlined {
            transform: translate(14px, -6px) scale(0.75);
        }
    }

    .input:focus-within ~ &.input-error {
        color: var(--palette-error);
    }
}
.application-layout-rtl {
    .input-label {
        transform-origin: top right;
    }

    .input-label-inputcontrol {
        left: unset;
        right: 0;
    }

    .input-label-shrink {
        transform-origin: top right;
    }

    .input-label-filled {
        transform: translate(-12px, 20px) scale(1);

        &.input-label-margin-dense {
            transform: translate(-12px, 17px) scale(1);
        }
    }

    .input-label-outlined {
        transform: translate(-14px, 20px) scale(1);

        &.input-label-margin-dense {
            transform: translate(-14px, 12px) scale(1);
        }
    }

    .shrink, .input:focus-within {
        ~ label.input-label.input-label-inputcontrol {
            transform-origin: top right;

            &.input-label-filled {
                transform: translate(-12px, 10px) scale(0.75);

                &.input-label-margin-dense {
                    transform: translate(-12px, 7px) scale(0.75);
                }
            }

            &.input-label-outlined {
                transform: translate(-14px, -6px) scale(0.75);
            }
        }
    }
}