src/components/InputField/Auth/InputField.module.css

@import '../../_variables.css';

:root {
     --bezier-custom: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


.inputContainer {
    position: relative;
    margin: 0 auto;
    font-family: Inter, sans-serif;
    color: var(--text-color-secondary);
    font-weight: var(--font-weight-medium);

    display: flex;
    align-items: center;
}

.inputField {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xxl) var(--spacing-md) var(--spacing-lg); /* 12px 24px 12px 14px */
    border: none;
    outline: none;
    border-bottom: var(--text-color-secondary) 1px solid;
    /* Used transition speed variables */
    transition: border-color var(--transition-timing-ease-in-out) var(--transition-speed-default),
                box-shadow var(--transition-timing-ease-in-out) var(--transition-speed-fast),
                border-bottom var(--transition-timing-ease-in-out) var(--transition-speed-medium);
    box-sizing: border-box;

    background-color: transparent;

    /* Remove default eye icon */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    &::-ms-reveal {
        display: none;
        width: 0;
        height: 0;
    }
}

.inputField:focus {
    border-bottom: var(--text-color-primary) 1.5px solid;
    transition: border-bottom var(--transition-speed-medium) var(--bezier-custom);
}

.inputField p {
    color: var(--text-color-primary)
}

.inputLabel {
    top: var(--spacing-lg); /* 14px */
    left: var(--spacing-sm); /* 10px */
    position: absolute;
    pointer-events: none;
    transition: transform-origin var(--transition-speed-default) var(--bezier-custom),
                transform var(--transition-speed-default) var(--bezier-custom),
                color var(--transition-speed-default) var(--transition-timing-ease-in-out),
                text-shadow var(--transition-speed-default) var(--transition-timing-ease-in-out);
}

.inputLabelFloating {
    transform: translate(calc(-1 * var(--spacing-xxs)), calc(-1 * var(--spacing-xxxl))) scale(var(--font-scale-sm)); /* Used spacing and font scale variables */
    color: var(--text-color-primary);
    text-shadow: 0.5px 0 0;
    transform-origin: top left;
}

.inputFieldIcon {
    /* Adjusted top and right based on original padding and available spacing variables */
    top: var(--spacing-xl); /* Roughly 16px */
    right: var(--spacing-sm); /* Roughly 10px */
    position: absolute;
    color: var(--text-color-secondary);
    background-color: var(--background-color-primary);
    transition: transform var(--transition-speed-default) var(--bezier-custom), /* Used --bezier-custom */
                color var(--transition-speed-default) var(--transition-timing-ease-in-out),
                text-shadow var(--transition-speed-default) var(--transition-timing-ease-in-out);
}

.inputField:hover {
    border-bottom-color: var(--text-color-primary);
}


.eyeIconWrapper {
    position: relative;
    width: var(--icon-size-default);
    height: var(--icon-size-default);
    cursor: pointer;
    perspective: 1000px;
}

.eyeIcon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: transform var(--transition-speed-default) var(--bezier-custom),
                opacity var(--transition-speed-default) var(--transition-timing-ease-in-out);
    backface-visibility: hidden;
}

.eyeIcon.visible {
    opacity: 1;
    transform: rotateX(0deg);
}

.eyeIcon.visible:hover {
    transform: scale(1.06);
}

.openEyeIcon {
    transform: rotateX(90deg);
}

.closedEyeIcon {
    transform: rotateX(-90deg);
}

.inputFieldIconFloating {
    transform: translateY(calc(-1 * var(--spacing-xxs)));
    color: var(--text-color-primary);
    text-shadow: 0.5px 0 0;
}