.button-module__root {
    padding-top: calc(0.5rem + 1px); /* TODO @TW: review */
    padding-bottom: calc(0.5rem - 1px); /* TODO @TW: review */
    min-height: 2.5rem;
    transition-duration: 256ms;
    transition-property: background-color, border-color, color;
    transition-timing-function: var(--venia-global-anim-standard);
}

.button-module__root:active {
    transition-duration: 128ms;
}

/**
 * Some browsers retain the :hover state after a click, this ensures if a button becomes disabled after
 * being clicked it will be visually disabled.
 */
.button-module__root:hover:disabled {
    /* TODO @TW: cannot compose. This may not be possible with two variants. */
    pointer-events: none;
}

.button-module__root_lowPriority {
}

.button-module__root_normalPriority {
}

.button-module__root_highPriority {
}

.button-module__root_lowPriorityNegative,
.button-module__root_normalPriorityNegative {
}

.button-module__root_highPriorityNegative {
}

.button-module__content {
}

.password-module__root:active {
    --stroke: var(--venia-global-color-gray-700);
}

.password-module__passwordButton {

    --stroke: var(--venia-global-color-gray-500);
    /* composes: min-w-0 from global; */
}

.password-module__passwordButton:hover {
    --stroke: var(--venia-global-color-gray-700);
}

.password-module__passwordButton:focus {
    --stroke: var(--venia-global-color-gray-700);
}

.password-module__root{
    padding-bottom: 0.4rem;
}

.password-module__root span{
    display: grid;
}

.password-module__passwordButton {
    border-style: none !important;
    min-width: 0px !important;
    justify-content: flex-end !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.password-module__passwordButton span img {
    height: 17px;
    width: 17px;
}

@media (min-width: 800px){
    .password-module__passwordButton span img {
        height: 100%;
    }
    .password-module__passwordButton span img {
        width: 100%;
    }
}