label[data-label="password"] {
    padding                 : calc(var(--message-height) + var(--message-margin) + 0px) 0px 0px;
}

label[data-label="password"] .label__input {
    display                 : flex;
    flex-direction          : row;
    align-items             : stretch;
    width                   : 100%;
}

label[data-label="password"] .label__input input {
    flex                    : 1;
    display                 : block;
    width                   : 100%;
    font-family             : inherit;
    font-size               : inherit;
    font-weight             : inherit;
    line-height             : inherit;
    color                   : inherit;
    background-color        : var(--white-14);
    border                  : 1px solid var(--white-35);
    border-radius           : var(--input-border-radius);
    padding                 : 6px 12px 6px;
    transition-property     : border-color, box-shadow;
    transition-duration     : 0.15s;
}

label[data-label="password"] .label__input input:disabled {
    background-color        : var(--black-39);
    opacity                 : 1;
    cursor                  : not-allowed;
}

label[data-label="password"] .label__input input:focus {
    background-color        : var(--white-2);
    border-color            : var(--white-2);
    outline                 : 0;
    box-shadow              : 0 0 0 3.2px var(--white-36);
}

label[data-label="password"] .label__icon {
    width                   : var(--icon-width);
    display                 : flex;
    justify-content         : center;
    align-items             : center;
    background-color        : var(--white-18);
    border                  : 1px solid var(--white-35);
    border-radius           : var(--input-border-radius);
}

label[data-label="password"] .label__icon > span[data-icon] {
    --icon-size             : 16px;
    display                 : block;
}

label[data-label="password"]:is([data-status~="iconed"], .icon__left) .label__input input {
    order                   : 2;
    border-radius           : 0px var(--input-border-radius) var(--input-border-radius) 0px;
}

label[data-label="password"]:is(.icon__right) .label__input input {
    order                   : 1;
    border-radius           : var(--input-border-radius) 0px 0px var(--input-border-radius);
}

label[data-label="password"]:is([data-status~="iconed"], .icon__left) .label__icon {
    order                   : 1;
    border-radius           : var(--input-border-radius) 0px 0px var(--input-border-radius);
    margin-right            : -1px;
}

label[data-label="password"]:is(.icon__right) .label__icon {
    order                   : 2;
    border-radius           : 0px var(--input-border-radius) var(--input-border-radius) 0px;
    margin-left            : -1px;
}

label[data-label="password"] .label__placeholder {
    position                : absolute;
    bottom                  : 0%;
    left                    : 0%;
    width                   : 100%;
    height                  : calc(100% - (var(--message-height) + var(--message-margin)));
    font-size               : inherit;
    font-weight             : inherit;
    line-height             : inherit;
    padding                 : 7px 13px 7px;
    color                   : var(--white-65);
    cursor                  : text;
    transition-property     : bottom, left, height, font-size, line-height, padding, color, opacity;
    transition-duration     : var(--hover-animation);
}

label[data-label="password"][data-status~="focused"] .label__placeholder,
label[data-label="password"][data-status~="not_empty"] .label__placeholder {
    bottom                  : calc(100% - var(--message-height));
    left                    : 0%;
    height                  : var(--message-height);
    font-size               : 14px;
    line-height             : 1;
    padding                 : 0px;
    color                   : var(--white-100);
    cursor                  : auto;
}

label[data-label="password"][data-status~="focused"]:hover .label__placeholder,
label[data-label="password"][data-status~="not_empty"]:hover .label__placeholder {
    opacity                 : 0;
}

label[data-label="password"]:is([data-status~="iconed"], .icon__left) .label__placeholder {
    left                    : var(--icon-width);
    width                   : calc(100% - var(--icon-width));
}

label[data-label="password"]:is(.icon__right) .label__placeholder {
    left                    : 0%;
    width                   : calc(100% - var(--icon-width));
}

label[data-label="password"][data-status~="focused"]:is([data-status~="iconed"], .icon__left, .icon__right) .label__placeholder,
label[data-label="password"][data-status~="not_empty"]:is([data-status~="iconed"], .icon__left, .icon__right) .label__placeholder {
    left                    : 0%;
    width                   : 100%;
}

label[data-label="password"] .label__title {
    position                : absolute;
    top                     : 0%;
    left                    : 0%;
    width                   : 100%;
    font-size               : 14px;
    line-height             : 1;
    transition-property     : opacity;
    transition-duration     : var(--hover-animation);
}

label[data-label="password"][data-status~="focused"] .label__placeholder ~ .label__title,
label[data-label="password"][data-status~="not_empty"] .label__placeholder ~ .label__title {
    opacity                 : 0;
}

label[data-label="password"] .label__message {
    position                : absolute;
    top                     : 0%;
    left                    : 0%;
    width                   : 100%;
    font-size               : 14px;
    line-height             : 1;
    opacity                 : 0;
    transition-property     : opacity;
    transition-duration     : var(--hover-animation);
}

label[data-label="password"][data-status~="success"] .label__message {
    color                   : var(--green-lime-100);
    opacity                 : 1;
}

label[data-label="password"][data-status~="notice"] .label__message {
    color                   : var(--amber-100);
    opacity                 : 1;
}

label[data-label="password"][data-status~="error"] .label__message {
    color                   : var(--pink-raspberry-100);
    opacity                 : 1;
}

label[data-label="password"][data-status~="success"]:hover .label__message,
label[data-label="password"][data-status~="notice"]:hover .label__message,
label[data-label="password"][data-status~="error"]:hover .label__message {
    opacity                 : 0;
}

label[data-label="password"][data-status~="success"] .label__message:not(:empty) ~ .label__title,
label[data-label="password"][data-status~="notice"] .label__message:not(:empty) ~ .label__title,
label[data-label="password"][data-status~="error"] .label__message:not(:empty) ~ .label__title {
    opacity                 : 0;
}

label[data-label="password"][data-status~="focused"]:hover .label__placeholder ~ .label__title,
label[data-label="password"][data-status~="not_empty"]:hover .label__placeholder ~ .label__title,
label[data-label="password"][data-status~="success"]:hover .label__message:not(:empty) ~ .label__title,
label[data-label="password"][data-status~="notice"]:hover .label__message:not(:empty) ~ .label__title,
label[data-label="password"][data-status~="error"]:hover .label__message:not(:empty) ~ .label__title {
    opacity                 : 1;
}

label[data-label="password"][data-status~="success"][data-status~="focused"] .label__message:not(:empty) ~ .label__placeholder,
label[data-label="password"][data-status~="success"][data-status~="not_empty"] .label__message:not(:empty) ~ .label__placeholder,
label[data-label="password"][data-status~="notice"][data-status~="focused"] .label__message:not(:empty) ~ .label__placeholder,
label[data-label="password"][data-status~="notice"][data-status~="not_empty"] .label__message:not(:empty) ~ .label__placeholder,
label[data-label="password"][data-status~="error"][data-status~="focused"] .label__message:not(:empty) ~ .label__placeholder,
label[data-label="password"][data-status~="error"][data-status~="not_empty"] .label__message:not(:empty) ~ .label__placeholder {
    opacity                 : 0;
}

label[data-label="password"][data-status~="success"] .label__input input {
    background-color        : var(--green-lime-14);
    border                  : 1px solid var(--green-lime-100);
}

label[data-label="password"][data-status~="notice"] .label__input input {
    background-color        : var(--amber-14);
    border                  : 1px solid var(--amber-100);
}

label[data-label="password"][data-status~="error"] .label__input input {
    background-color        : var(--pink-raspberry-14);
    border                  : 1px solid var(--pink-raspberry-100);
}

label[data-label="password"][data-status~="success"] .label__input input:focus {
    box-shadow              : 0 0 0 3.2px var(--green-lime-36);
}

label[data-label="password"][data-status~="notice"] .label__input input:focus {
    box-shadow              : 0 0 0 3.2px var(--amber-36);
}

label[data-label="password"][data-status~="error"] .label__input input:focus {
    box-shadow              : 0 0 0 3.2px var(--pink-raspberry-36);
}

label[data-label="password"] .label__toggle_eye {
    --icon-size             : 16px;
    position                : absolute;
    top                     : calc((100% + var(--message-height) + var(--message-margin)) / 2);
    right                   : 10px;
    cursor                  : pointer;
    transform               : translate(0%, -50%);
}