@import "./mixin.less";

.account-section-container {
  > .form-label {
    min-height: 28px;

    > .normal-text {
      @apply first:mr-2;
    }

    &.username-label {
      > input {
        flex-grow: 0;
        width: 128px;
        padding: 0 8px;
        font-size: 14px;
        border: 1px solid lightgray;
        border-radius: 4px;
        line-height: 26px;
        background-color: transparent;

        &:focus {
          border-color: black;
        }
      }

      > .btns-container {
        .flex(row, flex-start, center);
        margin-left: 8px;
        flex-shrink: 0;

        > .btn {
          font-size: 12px;
          padding: 0 16px;
          border-radius: 4px;
          line-height: 28px;
          margin-right: 8px;
          background-color: lightgray;

          &:hover {
            opacity: 0.8;
          }

          &.cancel-btn {
            background-color: unset;
          }

          &.confirm-btn {
            background-color: @text-green;
            color: white;
          }
        }
      }
    }

    &.password-label {
      > .btn {
        color: @text-blue;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}

.openapi-section-container {
  > .value-text {
    width: 100%;
    border: 1px solid lightgray;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1.6;
    word-break: break-all;
    white-space: pre-wrap;
  }

  > .reset-btn {
    margin-top: 4px;
    padding: 4px 8px;
    background-color: @bg-red;
    border: 1px solid red;
    color: red;
    border-radius: 4px;
    line-height: 1.6;
    cursor: pointer;
    user-select: none;
    font-size: 12px;

    &:hover {
      opacity: 0.8;
    }
  }

  > .usage-guide-container {
    .flex(column, flex-start, flex-start);
    @apply mt-2 w-full;

    > .title-text {
      line-height: 2;
    }

    > pre {
      @apply w-full bg-gray-50 py-2 px-3 text-sm rounded whitespace-pre-wrap;
    }
  }
}