@import (reference) '../../main/webapp/v4/IconButton.less';
@import (reference) '../../main/webapp/v4/TextInput.less';

btu-input[type='password'] {
  &:extend(.TextInput all);

  display: inline-flex;
  gap: var(--gap-m);
  position: relative;
  vertical-align: middle;
  width: 100%;

  > input {
    border: none;

    &:focus {
      border: none;
      padding-bottom: calc(var(--gap-s) - 1px);
    }
  }

  .ShowPassword-toggle {
    .IconButton;
    .Link();

    --Icon-size: var(--iconSize-xs);
    --IconButton-name: 'visibility';

    align-content: center;
    border: none;
    display: grid;
    justify-content: center;
    width: calc(var(--gap-s) * 2.8 + var(--Icon-size));

    &::before {
      padding: 0;
    }

    &.off {
      --IconButton-name: 'visibility_off';
    }
  }
}
