@use '../../abstract' as *;

.password-meter {
  position:absolute; z-index:2; bottom:pxToRem(4); inset-inline:pxToRem(8);
  width:0%; height:pxToRem(2); max-width:#{calc(100% - pxToRem(16))}; background:none;
  transition:var(--transition);

  &::-webkit-meter-optimum-value { background-image:none; } /* Safari */
  &::-webkit-meter-bar { background:none; } /* Safari */
  &::-moz-meter-bar { background:none; } /* FireFox */
  &.is-weak {
    background: hsl(var(--color-danger-100)); width:33.33%;
    &::-webkit-meter-optimum-value { background-color:hsl(var(--color-danger-100)); } /* Safari */
  }
  &.is-medium {
    background: hsl(var(--color-warning-100)); width:66.66%;
    &::-webkit-meter-optimum-value { background-color:hsl(var(--color-warning-100)); } /* Safari */
  }
  &.is-strong {
    background: hsl(var(--color-success-100)); width:100%;
    &::-webkit-meter-optimum-value { background-color:hsl(var(--color-success-100)); } /* Safari */
  }
}