@import '~tc-ui/src/styles/tc-includes';

.readonly-wrapper {
  :global(input.tc-file-field__inputs) {
    display: none;
  }
}

.readonly-value {
  color: $tc-gray-60;
  display: block;
  height: 40px;
  line-height: 40px;
  margin-bottom: 2 * $base-unit;
  padding: 0 2 * $base-unit;
  width: 100%;
}


:global {
  .password-input-container {
    position: relative;

    &.focus {
      .show-hide-button {
        background: $tc-dark-blue-70;
      }
    }

    .tc-file-field__inputs {
      padding-right: 66px;
    }

    .show-hide-button {
      position: absolute;
      margin-top: -39px;
      right: 1px;
      height: 28px;
      background: #D7D3D0;
      width: 60px;
      border-radius: 0 3px 3px 0;
      color: #FFFFFF;
      font-size: 13px;
      font-weight: 400;
      text-align: center;
  
      &:focus{
        background: $tc-red!important;
        border-color: $tc-red!important;
      }
    }
  }

}