toggle-password.directive.scss

@import 'topcoder/tc-includes';
@import '../tc-ui-variables.scss';

// Toggle password directive
toggle-password {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0px;
  position: relative;

  .input-btn {
    position: relative;
    width: 100%;
  }

  .input-btn .input {
    padding-right: 80px;
  }

  .input-btn .input:focus ~ .tc-btn {
    color: #FFFFFF;
    background: #59A7FF;
  }

  .input-btn .tc-btn,
  .input-btn .tc-btn:hover,
  .input-btn .tc-btn:focus,
  .input-btn .tc-btn:active {
    position: absolute;
    right: 1px;
    top: 21px;
    background: $tc-white;
    border: 0;
    border-left: 1px solid $tc-gray-30;
    height: 38px;
    border-radius: 0 3px 3px 0;
    box-shadow: none;
    line-height: inherit;
    color: $tc-gray-80;
  }

  button#toggleInputTypeBtn {
    width: 75px;
    margin-top: 0px;
  }

}