smart-password-input {
  --smart-outline: var(--smart-primary);
  display: inline-block;
  width: var(--smart-text-box-default-width);
  height: var(--smart-text-box-default-height);
  overflow: visible;
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);

  >.smart-container {
    display: flex;
  }

  &.smart-element {
    background: var(--smart-background);
  }

  input {
    &.smart-input {
      border: none;
      text-overflow: ellipsis;
    }
  }
}

.smart-password-input {

  input::-ms-reveal,
  input::-ms-clear {
    display: none;
  }

  .smart-container {
    width: 100%;
    height: 100%;
    color: inherit;
    font-family: inherit;
    position: relative;
    overflow: visible;
  }

  .smart-drop-down-button {
    background: transparent;
    border-color: transparent;
    display: block;
    border-left: none;

    &:hover,
    &:active,
    &[active] {
      color: var(--smart-primary) !important;
      background: transparent !important;
      border-color: transparent !important;
    }

    .arrow:after {
      color: var(--smart-background-color);
      content: var(--smart-icon-visibility);
    }

    .arrow.off:after {
      color: var(--smart-background-color);
      content: var(--smart-icon-visibility-off);
    }
  }
}