@use '../../../../mx-core/src/base/opacity';

:host {
  display: block;
  position: relative;
}

.mx-password-input {
  &__input {
    width: calc(100% - 32px);
    &:focus {
      mx-validation-rule-list > .mx-validation-rule-list__content {
        display: block;
      }
    }
  }
  &__button {
    position: absolute;
    bottom: -4px;
    right: -16px;
    &.disabled {
      opacity: opacity.$opacity-38;
    }
  }
}